Instrucción de entrada AngularJS

Definición y uso

AngularJS modifica <input> comportamiento predeterminado del elemento, siempre y cuando exista la propiedad ng-model.

Proporcionan enlace de datos, lo que significa que son parte del modelo AngularJS y se pueden referir y actualizar en funciones AngularJS y DOM.

Proporcionan validación. Ejemplo: con required propiedad <input> elemento, siempre que esté vacío, su $valid El estado se configurará false.

También proporcionan control de estado. AngularJS guarda el estado actual de todos los elementos de entrada.

El campo de entrada tiene los siguientes estados:

• $untouched Este campo no ha sido tocado
• $touched Este campo ha sido tocado
• $pristine Este campo no ha sido modificado
• $dirty Este campo ha sido modificado
• $invalid El contenido del campo es inválido
• $valid El contenido del campo es válido

Cada valor de estado representa un valor booleano, es true o false.

Ejemplo

Cuadro de entrada con enlace de datos:

<input ng-model="myInput">
<p>El valor del cuadro de entrada es:</p>
<h1>{{myInput}}</h1>

Prueba personalmente

Sintaxis

<input ng-model="name">

Usar ng-model El valor de la propiedad se usa para referirse al elemento de entrada.

Clases CSS

Dentro de una aplicación AngularJS <input> El elemento se le asignan ciertas clases. Estas clases se pueden usar para establecer el estilo del elemento según su estado de entrada.

Se han agregado las siguientes clases:

• ng-untouched Este campo no ha sido tocado
• ng-touched Este campo ha sido tocado
• ng-pristine Este campo no ha sido modificado
• ng-dirty Este campo ha sido modificado
• ng-valid El contenido del campo es válido
• ng-invalid El contenido del campo es inválido
• ng-valid-key verificar cada clave. Por ejemplo:ng-valid-requiredes muy útil cuando hay más de una cosa que debe verificarse
• ng-invalid-key Por ejemplo:ng-invalid-required

Si el valor representado por la clase es falsese eliminarán estos clases.

Ejemplo

Aplicar estilos estándar CSS a elementos de entrada válidos e inválidos:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Prueba personalmente