directive

Crea un nivel superior FormGroup instancia y lo enlaza a un formulario para rastrear el valor agregado del formulario y el estado de validación.

Ver más…

Exportado de

  • FormsModule

Selectores

Propiedades

Propiedad Descripción
submitted: boolean Solo lectura

Devuelve si se ha activado el envío del formulario.
form: FormGroup

los FormGroup instancia creada para este formulario.
@Output()ngSubmit: EventEmitter

Emisor de eventos para el evento “ngSubmit”
@Input('ngFormOptions')options:
updateOn?: FormHooks;

Opciones de pistas para el NgForm ejemplo.

updateOn: Establece el valor predeterminado updateOn valor para todos los niños NgModels debajo de él a menos que un niño lo establezca explícitamente NgModel utilizando ngModelOptions). El valor predeterminado es “cambiar”. Valores posibles: 'change' | 'blur' | 'submit'.
formDirective: Form Solo lectura

La instancia directiva.
control: FormGroup Solo lectura

El interno FormGroup ejemplo.
path: string[] Solo lectura

Devuelve un array que representa el camino a este grupo. Debido a que esta directiva siempre vive en el nivel superior de un formulario, siempre es un array.
controls:
[key: string]: AbstractControl;
 Solo lectura

Devuelve un mapa de los controles de este grupo.

Heredado de ControlContainer

Heredado de AbstractControlDirective

Referencias de variables de plantilla

Identificador Uso
ngForm #myTemplateVar="ngForm"

Descripción

Tan pronto como importe el FormsModule, esta directiva se activa de forma predeterminada en todos

etiquetas. No es necesario agregar un selector especial.

Opcionalmente, exporta la directiva a una variable de plantilla local usando ngForm como el key (ex: #myForm="ngForm"). Esto es opcional, pero útil. Muchas propiedades del subyacente FormGroup instancia están duplicados en la propia directiva, por lo que una referencia a ella le da acceso al valor agregado y al estado de validez del formulario, así como a las propiedades de interacción del usuario como dirty y touched.

Para registrar controles secundarios con el formulario, use NgModel con un name attribute. Puedes utilizar NgModelGroup para crear subgrupos dentro del formulario.

Si es necesario, escuche las directivas ngSubmit evento que se notificará cuando el usuario haya activado el envío de un formulario. los ngSubmit evento emite el evento de envío de formulario original.

En formularios basados ​​en plantillas, todos

las etiquetas se etiquetan automáticamente como NgForm. Para importar el FormsModule pero omita su uso en algunas formas, por ejemplo, para usar la validación HTML5 nativa, agregue el ngNoForm y el

las etiquetas no crearán un NgForm directiva. En formas reactivas, usando ngNoForm es innecesario porque el

las etiquetas son inertes. En ese caso, se abstendrá de utilizar el formGroup directiva.

Escuchando el envío del formulario

El siguiente ejemplo muestra cómo capturar los valores de formulario del evento “ngSubmit”.

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

Configurar las opciones de actualización

El siguiente ejemplo le muestra cómo cambiar la opción “updateOn” de su valor predeterminado usando ngFormOptions.

<form[ngFormOptions]="updateOn: 'blur'"><inputname="one"ngModel>form>

Interfaz de usuario de validación de DOM nativa

Para evitar que la interfaz de usuario de validación del formulario DOM nativo interfiera con la validación del formulario de Angular, Angular agrega automáticamente el novalidate attribute en cualquier

cuando sea FormModule o ReactiveFormModule se importan a la aplicación. Si desea habilitar explícitamente la interfaz de usuario de validación DOM nativa con formularios angulares, puede agregar el ngNativeValidate attribute al

elemento:

<formngNativeValidate>
  ...
form>

Métodos

addControl ()

Método que configura la directiva de control en este grupo, vuelve a calcular su valor y validez y agrega la instancia a la lista interna de directivas.

addControl(dir: NgModel): void

Parámetros
dir NgModel

los NgModel instancia directiva.
Devoluciones

void
getControl ()

Recupera el FormControl instancia de la proporcionada NgModel directiva.

getControl(dir: NgModel): FormControl

Parámetros
dir NgModel

los NgModel instancia directiva.
Devoluciones

FormControl
removeControl ()

Elimina el NgModel instancia de la lista interna de directivas

removeControl(dir: NgModel): void

Parámetros
dir NgModel

los NgModel instancia directiva.
Devoluciones

void
addFormGroup ()

Agrega un nuevo NgModelGroup instancia de directiva al formulario.

addFormGroup(dir: NgModelGroup): void

Parámetros
dir NgModelGroup

los NgModelGroup instancia directiva.
Devoluciones

void
removeFormGroup ()

Elimina el NgModelGroup instancia de directiva del formulario.

removeFormGroup(dir: NgModelGroup): void

Parámetros
dir NgModelGroup

los NgModelGroup instancia directiva.
Devoluciones

void
getFormGroup ()

Recupera el FormGroup para un proporcionado NgModelGroup instancia directiva

getFormGroup(dir: NgModelGroup): FormGroup

Parámetros
dir NgModelGroup

los NgModelGroup instancia directiva.
Devoluciones

FormGroup
updateModel ()

Establece el nuevo valor para el proporcionado NgControl directiva.

updateModel(dir: NgControl, value: any): void

Parámetros
dir NgControl

los NgControl instancia directiva.
value any

El nuevo valor para el control de la directiva.
Devoluciones

void
valor ajustado()

Establece el valor para esto FormGroup.

setValue(value: [key: string]: any; ): void

Parámetros
value object

El nuevo valor
Devoluciones

void
onSubmit ()

Método llamado cuando se activa el evento “enviar” en el formulario. Activa el ngSubmit emisor para emitir el evento “enviar” como su carga útil.

onSubmit($event: Event): boolean

Parámetros
$event Event

El objeto de evento “enviar”
Devoluciones

boolean
onReset ()

Método llamado cuando se activa el evento “reset” en el formulario.

onReset(): void

Parámetros

No hay parámetros.

Devoluciones

void
restablecer formulario()

Restablece el formulario a un valor inicial y restablece su estado enviado.

resetForm(value: any = undefined): void

Parámetros
value any

El nuevo valor del formulario.

Opcional. El valor predeterminado es undefined.
Devoluciones

void

Heredado de AbstractControlDirective