How to check all fields in the submit form ng-submit="submit(field)" is empty in controller.js? They consists of few textboxes and one select field.
I would want an alert box to occur if all fields are empty and select option is not selected, instead of individual validation.
While it's not exactly what you're asking about, may be $pristine is what you want? It's a flag on the form indicating whether the form has ever been edited. If someone typed and then cleared out a field, $pristine would still be false, however.
<form name="myform" ng-submit="doSubmit()" ng-controller="FormController">
<input ng-model="firstName" name="firstName" />
</form>
Then in your controller
.controller('FormController', function($scope){
$scope.doSubmit = function(){
if($scope.myform.$pristine){}
}
})
Alternatively, you can set all your fields to required="true" and use the $valid flag on the form in the same way as described above.
You can use this:
ng-show="!yourfield.length"
Something like this:
<form name="yourform">
<input name="yourfield" ng-model="somefield" ng-minlength="10" required>
<span ng-show="!yourfield.myfield.$error.required">Something</span>
</form>
You should look for Form Validation . Take a look at this tutorial.
<input name="name" class="form-control"
ng-model="user.name" placeholder="Name" required>
<div class="alert alert-danger"
ng-show="userForm.name.$error.required">
Please enter the name.
</div>
The following will show an alert if all fields are empty
angular.module('app', [])
.controller('FormController', function($scope) {
$scope.doSubmit = function(){
if (formIsEmpty($scope.myform)){
alert('You forgot to enter something before submitting');
}
};
function formIsEmpty(form) {
for (var prop in form) {
if (!form.hasOwnProperty(prop)) { continue; }
if (prop[0] === '$') { continue; }
if ($scope[prop]) { return false; }
}
return true;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form name="myform" ng-submit="doSubmit()" ng-controller="FormController">
<input ng-model="firstName" name="firstName" />
<input ng-model="lastName" name="lastName" />
<textarea ng-model="description" name="description"></textarea>
<button type="submit">Submit</button>
</form>
</div>
