HTML:
<div class="form-group"
ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }">
<label for="firstName"
class="control-label">
First Name
</label>
<input type="text"
name="firstName"
id="firstName"
ng-model="editableUser.firstName"
class="form-control"
required>
<span class="help-block"
ng-show="form.firstName.$error.required && form.firstName.$touched">
First Name is required
</span>
</div>
<input type="submit"
ng-click="submit()"
value="Submit"
class="btn btn-default">
I'm trying to get my the 'has-error' class to kick in for invalid fields when a user clicks submit.
I would think you could do something like this:
$scope.submit = function () {
if ($scope.form.$invalid) {
angular.forEach($scope.form.$invalid, function(field) {
field.$setTouched();
});
alert("Form is invalid.");
}
};
But there is no $setTouched method in https://docs.angularjs.org/api/ng/type/form.FormController
EDIT: Realize $setTouched does exist, it's in https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
if ($scope.form.$invalid) {
angular.forEach($scope.form.$error, function (field) {
angular.forEach(field, function(errorField){
errorField.$setTouched();
})
});
alert("Form is invalid.");
}
Try the recently added $submitted
<input type="text"
name="firstName"
id="firstName"
ng-model="editableUser.firstName"
class="form-control"
required>
<span class="help-block"
ng-show="form.firstName.$error.required && (form.firstName.$touched || form.$submitted">
First Name is required
Extending on Alexey's answer, you can add new method to FormController that will do the same, so there's no need to copy code from one submit function to another:
// config.js
export default function config($provide) {
$provide.decorator('formDirective', $delegate => {
const fn = $delegate[0].controller.prototype
if (!('$setTouched' in fn)) fn.$setTouched = function() {
if (this.$invalid) {
Object.values(this.$error).forEach(controls => {
controls.forEach(control => control.$setTouched())
})
}
}
return $delegate
})
}
// controller.js
$scope.submit = function () {
if ($scope.form.$invalid) {
$scope.form.$setTouched();
alert("Form is invalid.");
}
};
In case someone wonders why would anyone want to do this kind of validation: iOS constraint validation is lacking, so ng-submit gets called even on invalid forms.