javascript - invalid - Usar $ dirty en angularjs para verificar cada vez que se edita un formulario
validar formulario angular 5 (1)
Intenté verificar cada vez que se edita mi formulario escribiendo algunos campos de él. Leí $ sucio que debería funcionar para esa tarea, pero no puedo entender lo que me estoy perdiendo aquí:
<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form name = "myForm" novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p> is Form dirty? {{isDirty}}<p>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module(''myApp'', []);
app.controller(''formCtrl'', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.isDirty = $scope.myForm.$dirty;
});
</script>
</body>
</html>
Estoy intentando hacer que la bandera isDirty sea verdadera cada vez que el usuario modifique el formulario. Gracias
Le faltan atributos de name en los campos de formulario que no habilitan la validación de formulario para esos campos. myForm agregar un nombre único para cada campo para que obtenga esos campos en el objeto myForm
Margen
<form name="myForm" novalidate>
First Name:<br>
<input type="text" name="firstName" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name="lastName" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
También está accediendo myForm objeto myForm que no es más que un objeto de formulario, no estaré disponible hasta que el DOM sea procesado, $scope.myForm simplemente no estará definido en el momento de la activación del controlador, si realmente desea acceder a $scope.myForm desde entonces el controlador debe poner ese código en $timeout que ejecutará el código de la función $timeout en el próximo ciclo de resumen.
$timeout(function(){
$scope.isDirty = $scope.myForm.$dirty;
});
Actualizar
No es necesario mantener un indicador isDirty separado (esto requeriría cambiar el indicador isDirty separado para reflejar cualquier cambio en myForm.$dirty flag). En su lugar, le sugiero que use $scope.myForm.$dirty directamente como indicador. Entonces use la expresión myForm.$dirty , y esta bandera cambiará a medida que la forma se ensucie.