La entrada es una etiqueta HTML que se usa para obtener la entrada del usuario. El modelo ng es una directiva angular que se usa para el enlace de datos (es decir, el modelo ng proporciona una referencia al elemento de entrada ). Ambos se combinan para modificar el campo de entrada.
Sintaxis:
<input ng-model="name">
Los siguientes estados se establecen al campo de entrada cuyo valor es verdadero para lo siguiente.
- $untouched: cuando el campo no ha sido tocado
- $tocado: cuando el campo ha sido tocado
- $pristine: cuando el campo no ha sido modificado
- $dirty: cuando el campo ha sido modificado
- $invalid: cuando el contenido del campo no es válido
- $valid: cuando el contenido del campo es válido
Ejemplo: $estado válido para el campo de entrada requerido en un formulario se explica a continuación
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="">
<center>
<h1 style="color:green">
GeksforGeeks
</h1>
<form name="form1">
<input name="var1"
ng-model="var1"
required>
</form>
<p>{{var1}}</p>
<p>The state of $valid is {{form1.var1.$valid}}</p>
</center>
</body>
</html>
Salida:
Antes:
Después:
Para la directiva de entrada mencionada anteriormente, se agregan pocas clases de CSS. Están:
- ng-untouched: el campo aún no se ha tocado
- ng-touched: el campo ha sido tocado
- ng-pristine: el campo aún no se ha modificado
- ng-dirty: El campo ha sido modificado
- ng-valid: el contenido del campo es válido
- ng-invalid: el contenido del campo no es válido
- ng-valid-key: Una clave para cada validación.
Ejemplo: ng-valido-requerido - ng-invalid-key: Una clave para cada validación.
Ejemplo: ng-no válido-requerido
Las clases se eliminan si el valor es falso .
Ejemplo:
si el campo de entrada se usa junto con el atributo requerido, se establecen los estados válido (cuando hay una entrada, se establece en verdadero) e inválido (cuando no hay entrada, se establece en verdadero). Las clases se eliminan si el valor es falso.
<!DOCTYPE html>
<html>
<head>
<title>
input Directive
</title>
<style>
input.ng-invalid {
background-color: green;
}
input.ng-valid {
background-color: yellow;
}
</style>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="">
<center>
<h1 style="color:green">
GeksforGeeks
</h1>
<form name="form1">
<input name="var1"
ng-model="var1"
required>
</form>
<p>{{var1}}</p>
<p>
The state of $valid is
{{form1.var1.$valid}}
</p>
</center>
</body>
</html>
Salida:
Antes: 
Después:
Publicación traducida automáticamente
Artículo escrito por sivapriyatn y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA