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">Estoy tratando de hacer que mi clase 'has-error' se active para campos no válidos cuando un usuario hace clic en enviar.
Pensaría que podrías hacer algo como esto:
$scope.submit = function () { if ($scope.form.$invalid) { angular.forEach($scope.form.$invalid, function(field) { field.$setTouched(); }); alert("Form is invalid."); } }; Pero no hay un método $setTouched en https://docs.angularjs.org/api/ng/type/form.FormController
EDITAR: tenga en cuenta que $setTouched existe, está en 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."); }Pruebe el $ enviado recientemente agregado
<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 requiredAmpliando la respuesta de Alexey, puede agregar un nuevo método a FormController que hará lo mismo, por lo que no es necesario copiar el código de una función de envío a otra:
// 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."); } }; En caso de que alguien se pregunte por qué alguien querría hacer este tipo de validación: falta la validación de restricciones de iOS, por lo que se llama a ng-submit incluso en formularios no válidos.