directive

Crea un FormControl instancia de un modelo de dominio y lo vincula a un elemento de control de formulario.

Ver más…

Ver también

Exportado de

  • FormsModule

Selectores

Propiedades

Propiedad Descripción
control: FormControl Solo lectura
@Input()name: string

Realiza un seguimiento del nombre vinculado a la directiva. Si existe un formulario principal, utiliza este nombre como key para recuperar el valor de este control.
@Input('disabled')isDisabled: boolean

Realiza un seguimiento de si el control está desactivado.
@Input('ngModel')model: any

Realiza un seguimiento del valor vinculado a esta directiva.
@Input('ngModelOptions')options:
name?: string;
standalone?: boolean;
updateOn?: FormHooks;

Realiza un seguimiento de las opciones de configuración para este ngModel ejemplo.

nombre: Una alternativa a la configuración del nombre attribute en el elemento de control de formulario. Vea el ejemplo de uso NgModel como control independiente.

ser único: Cuando se establece en true, los ngModel no se registrará con su formulario padre y actuará como si no estuviera en el formulario. Predeterminado a false. Si no existe un formulario principal, esta opción no tiene ningún efecto.

updateOn: Define el evento sobre el cual se actualizan el valor de control de formulario y la validez. El valor predeterminado es “cambiar”. Valores posibles: 'change' | 'blur' | 'submit'.
@Output('ngModelChange')update: EventEmitter

Emisor de eventos para producir el ngModelChange evento después de que se actualice el modelo de vista.
path: string[] Solo lectura

Devuelve un array que representa la ruta desde el formulario de nivel superior a este control. Cada índice es el string nombre del control en ese nivel.
formDirective: any Solo lectura

La directiva de nivel superior para este control si está presente; de ​​lo contrario null.

Heredado de NgControl

Heredado de AbstractControlDirective

Referencias de variables de plantilla

Identificador Uso
ngModel #myTemplateVar="ngModel"

Descripción

los FormControl La instancia rastrea el valor, la interacción del usuario y el estado de validación del control y mantiene la vista sincronizada con el modelo. Si se usa dentro de un formulario principal, la directiva también se registra con el formulario como un control secundario.

Esta directiva se utiliza sola o como parte de un formulario más amplio. Utilizar el ngModel selector para activarlo.

Acepta un modelo de dominio como opcional Input. Si tiene un enlace unidireccional para ngModel con [] sintaxis, cambiar el valor del modelo de dominio en la clase de componente establece el valor en la vista. Si tiene un enlace bidireccional con [()] sintaxis (también conocida como ‘sintaxis banana-in-a-box’), el valor en la interfaz de usuario siempre se sincroniza con el modelo de dominio en su clase.

Para inspeccionar las propiedades de los asociados FormControl (como el estado de validez), exporte la directiva a una variable de plantilla local usando ngModel como el key (ex: #myVar="ngModel"). A continuación, puede acceder al control utilizando la directiva control propiedad. Sin embargo, las propiedades más utilizadas (como valid y dirty) también existen en el control de acceso directo. Vea una lista completa de propiedades directamente disponibles en AbstractControlDirective.

Usando ngModel en un control independiente

Los siguientes ejemplos muestran un control independiente simple usando ngModel:

importComponentfrom'@angular/core';@Component(
  selector:'example-app',
  template:`
    

    
Value:  name 

    
Valid:  ctrl.valid 


    
  `,)exportclassSimpleNgModelComp
  name:string='';setValue()this.name ='Nancy';

Al usar el ngModel dentro de

etiquetas, también deberá proporcionar una name attribute para que el control se pueda registrar con el formulario principal con ese nombre.

En el contexto de un formulario principal, a menudo no es necesario incluir enlaces unidireccionales o bidireccionales, ya que el formulario principal sincroniza el valor por usted. Puede acceder a sus propiedades exportándolo a una variable de plantilla local usando ngForm tal como (#f="ngForm"). Utilice la variable donde sea necesario en el envío del formulario.

Si necesita completar los valores iniciales en su formulario, use un enlace unidireccional para ngModel tiende a ser suficiente siempre que utilice el valor del formulario exportado en lugar del valor del modelo de dominio al enviarlo.

Usando ngModel dentro de un formulario

El siguiente ejemplo muestra controles usando ngModel dentro de una forma:

importComponentfrom'@angular/core';importNgFormfrom'@angular/forms';@Component(
  selector:'example-app',
  template:`
    
      
      
      
    

    
First name value:  first.value 

    
First name valid:  first.valid 

    
Form value:  f.value 

    
Form valid:  f.valid 

  `,)exportclassSimpleFormComponSubmit(f: NgForm)console.log(f.value);//  first: '', last: '' console.log(f.valid);// false

Usando un ngModel independiente dentro de un grupo

El siguiente ejemplo le muestra cómo usar un control ngModel independiente dentro de un formulario. Esto controla la visualización del formulario, pero no contiene datos del formulario.

<form><inputname="login"ngModelplaceholder="Login"><inputtype="checkbox"ngModel[ngModelOptions]="standalone: true"> Show more options?
form>

Configurando el ngModel name attribute a través de opciones

El siguiente ejemplo le muestra una forma alternativa de establecer el nombre attribute. Aquí, un attribute identificado como nombre se utiliza dentro de un componente de control de formulario personalizado. Para poder especificar el nombre del NgModel, debe especificarlo usando el ngModelOptions entrada en su lugar.

<form><my-custom-form-controlname="Nancy"ngModel[ngModelOptions]="name: 'user'">my-custom-form-control>form>

Métodos

viewToModelUpdate ()

Establece el nuevo valor para el modelo de vista y emite un ngModelChange evento.

viewToModelUpdate(newValue: any): void

Parámetros
newValue any

El nuevo valor emitido por ngModelChange.
Devoluciones

void

Heredado de NgControl

Heredado de AbstractControlDirective