Programmatically set all form fields to ng-touched on form submission
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.
if ($scope.form.$invalid) {
angular.forEach($scope.form.$error, function (field) {
angular.forEach(field, function(errorField){
errorField.$setTouched();
})
});
alert("Form is invalid.");
}
plunker: http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11
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