I have got three input fields on a form.
I am looking for a way in which a form is valid if either or any combination of inputs is required, It means atleast one is necessary .Also user may enter inputs in any combination even then also form is valid.
I have read ng-required but that will make my expression too long.
<td>Name</td>
<td><input type="text" class="form-control input-xs" name="name"
ng-model="ctrl.orderSearch.name" minlength="4">
</td>
<td>Class</td>
<td><input type="text" class="form-control input-xs" name="class"
ng-model="ctrl.orderSearch.Class" minlength="6">
</td>
<td>Roll No:</td>
<td><input type="text" class="form-control input-xs" name="rollNo"
ng-model="ctrl.orderSearch.RollNo" minlength="6">
</td>
Update: I don't want to diable submit button. The form is valid in either of these scenarios:
1)field one or two or three is filled
2) 1,2 or 1,3 or 2,3 is filled
3) 1,2,3 is filled.
Also, I tried to use:
ng-required="!(ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length )" on fields. But when I submit my form ,an in built pop up from angular is presented on my name field saying "Please fill this required field" because whenever form.$valid is called on an empty form , field one would be checked first and hence pop up will be displayed on that field. But to user, it may seem field one is mandatory which is not the case.
Also , I don't want to write a custom method for validation. Is is it possible using ng-required? Please help.
Check this link
HTML
<form name="myForm">
<input type="text" ng-model="fields.one" name="firstField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
<br/>
<input type="text" name="secondField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" ng-model="fields.two" />
<br/>
<input type="text" ng-model="fields.three" name="thirdField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
<br/>
<button type="submit" ng-disabled="!myForm.$valid">Submit</button>
<br/>
<div>
<p>Submitted ? <span ng-bind="fields.submitted"></span>
</p>
<p>Form $valid: <span ng-bind="myForm.$valid"></span>
</p>
</div>
</form>
Js
angular.module("myApp", [])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.fields = {
one: '',
two: '',
three: '',
submitted: 'Not Yet'
};
$scope.submit = function () {
$scope.fields.submitted = "Yahooo";
}
}]);
You can create a $scope variable that will do the "either or all of fields required checking". That $scope variable will be your flag on when a form is valid or not.
example:
Controller
function SampleController(){
$scope.isValidForm = function(){
//do the checking here.
//return true or false
}
}
View:
<button ng-disabled="!isValidForm()">Submit</button>
I have edited your code check your code... check the fiddle link Fiddle
Hope this will help you to understand validation..
<div ng-app ng-controller="myCtrl">
<table ng-form="checkForm">
<tr>
<td>Name</td>
<td>
<input type="text" class="form-control input-xs" required name="name"
ng-model="ctrl.orderSearch.name" minlength="4" >
</td>
<td>
<div ng-show="checkForm.name.$invalid">
name error
</div>
</td>
</tr>
<tr>
<td>Class</td>
<td>
<input type="text" class="form-control input-xs" required name="class"
ng-model="ctrl.orderSearch.Class" minlength="6" >
</td>
<td>
<div ng-show="checkForm.class.$invalid">
class error
</div>
</td>
</tr>
<tr>
<td>Roll No:</td>
<td>
<input type="text" class="form-control input-xs" required name="rollNo"
ng-model="ctrl.orderSearch.RollNo" minlength="6" >
</td>
<td>
<div ng-show="checkForm.rollNo.$invalid">
Roll no error
</div>
</td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:green">
<span ng-show="checkForm.name.$valid || checkForm.class.$valid || checkForm.rollNo.$valid">Valid Form</span>
</td>
</tr>
</table>
</div>
Below is the code it will validate on form submitting event.It will restrict while you submit the form and your form contains all the fields empty.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.isOneFieldRequired = function (name,uclass,rollNo) {
return !(name|| uclass|| rollNo);
};
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<input type="text" ng-model="name" name="name" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<input type="text" ng-model="uclass" name="uclass" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<input type="text" ng-model="rollNo" name="rollNo" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<button type="submit"> Submit</button>
</form>
</div>
</body>
</html>
I am practicing my angular.js and form validation. I want to make it so that the form won't submit when I click submit if variables user_valid and pass_valid are false. I do thus perfectly fine when writing code outside of angularjs by calling return false;.
But when work in angular.js, and insert ng-submit='loginVal()', and type in my controller:`
logApp.controller('logForm', function($scope, $http){
user_valid = false;
pass_valid = false;
$scope.loginVal = function(){
if (user_valid == false && pass_valid == false){
return false;
console.log('Submit Stopped');
}
}`
...
});
The form still submits, and it shows in console Navigated to ~form-action url~. I don't know why it is submitting. The rest of the functions in the controller have nothing related to this function, so i excluded it.
HTML:
<form name='login' method="post" action="" ng-submit='loginVal()'>
{% csrf_token %}
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' ng-change='checkName()'/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' />
</div>
</td>
</tr>
<td></td>
<td><input type="submit" value="Login" id='loginSubmit' disabled /></td>
</tr>
</table>
</form>
Remove the action and the method attributes in the form tag
EDIT
Look at this fiddle: https://jsfiddle.net/80Laf822/1/
<div ng-controller="FormController">
<form name='loginForm' method="post" action="" ng-submit='loginVal()'>
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' required/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' required/>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" />
</td>
</tr>
</table>
</form>
</div>
You can use the required attribute in the input and the property $invalid of the form to automatically disable or enable the button if the form is valid or not. You can do all type of things like patterns, max-length, min-lenght ...
I have made simple example: http://codepen.io/anon/pen/VLpYJm?editors=101
In this example I need to get field.type and using it with ng-switch.
<div ng-app="app">
<table ng-controller="tableController">
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
<select ng-model="item" ng-options="field.label for field in fields track by field.name" required="required" />
</td>
<td>
<div ng-switch on="item.type">
<div ng-switch-when="BOOLEAN">
<input ng-model="item.value" type="checkbox" />
</div>
<div ng-switch-default>
<input ng-model="item.value" type="text" class="form-control" required="">
</div>
</div>
</td>
<td>{{selected}}</td>
</tr>
</table>
</div>
I want to validate name field in this code..
<script type="text/ng-template" id="add.html">
<div class="modal-header">
<h3 class="modal-title">ADD</h3>
</div>
<div class="modal-body">
<table class="add-table">
<form name="myForm">
<tr>
<div class="form-group">
<td>
<label>name:</label>
</td>
<td>
<input type="text" name="name" ng-model="user.name"
placeholder="Name" required=""></input>
<span class="error" ng-show="myForm.name.$dirty">Required</span>
</td>
</div>
</tr>
</form>
</table>
</div>
</script>
The expression myForm.name.$dirty does not evaluate and return any value.
What am I doing wrong here?
Try moving your <table> inside the <form>.
Also try using
$invalid instead of $dirty.
I have a form that is inserted via ng-include, but it doesn't work. If I manually paste in the html template from the ng-include src (instead of using ng-include), then it works fine. Is there something about ng-include that disables forms?
<div ng-include src="'views/login_form.html'"></div>
login_form.html:
<form ng-submit="loginUser()">
<table>
<tr>
<td class="login_input_field v_align_top">
<input type="text" name="email" ng-model="email">
</td>
<td class="login_input_field">
<input type="password" name="pass" ng-model="password">
</td>
<td class="login_button_container">
<button type="submit" id="login" name="login">Login</button>
</td>
</tr>
</table>
</form>
What am I missing?
Try breaking out the loginUser() into its own subcontroller.
That way your function will be in the same $scope.
<div ng-controller="LoginUserController">
<div ng-include src="'views/login_form.html'"></div>
</div>