Un breve análisis de las formas responsivas en el aprendizaje angular.

Cómo comenzar rápidamente con VUE3.0: ingresar para aprender

formularios responsivos

Angular proporciona dos métodos diferentes para manejar la entrada del usuario a través de formularios:响应式表单y模板驱动表单. [Recomendación del tutorial relacionado: "Tutorial angular"]

• Formulario responsivo: proporciona acceso directo y explícito al modelo de objetos de formulario subyacente. Son más sólidos que los formularios basados ​​en plantillas. Si los formularios son una parte clave de su aplicación, o si ya está creando su aplicación usando formularios reactivos, use formularios reactivos.
• Formularios basados ​​en plantillas: dependen de las instrucciones de las plantillas para crear y manipular el modelo de objetos subyacente. Son útiles para agregar un formulario simple a su aplicación, como un formulario de registro en una lista de correo electrónico.

Aquí solo se presentan formularios receptivos. Para formularios basados ​​en plantillas, consulte el sitio web oficial:

https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

Registre globalmente el módulo de formulario receptivo ReactiveFormsModule.

Para usar el control de formulario responsivo, debe importar ReactiveFormsModule desde el paquete @angular/forms y agregarlo a la matriz imports de su NgModule . Como sigue: app.module.ts

/***** app.module.ts *****/
importar {ReactiveFormsModule} desde '@angular/forms';

@NgModule({
  importaciones: [
    // otras importaciones...
    Módulo de formularios reactivos
  ],
})
export class AppModule { }

Agregar control de formulario básico FormControl

Hay tres pasos para usar el control de formulario.

• Registre el módulo de formulario reactivo en su aplicación. Este módulo declara algunas directivas que desea utilizar en formularios reactivos.

• Genere una nueva instancia FormControl y guárdela en el componente.

• Registre este FormControl en la plantilla.

Para registrar un control de formulario, importe la clase FormControl y cree una nueva instancia de FormControl , guardándola como una propiedad de la clase. Como sigue: test.component.ts

/***** test.component.ts *****/
importar {Componente} desde '@angular/core';
importar {FormControl} desde '@angular/forms';

@Componente({
  selector: 'editor-de-nombre-de-aplicación',
  URL de plantilla: './nombre-editor.component.html',
  URL de estilo: ['./nombre-editor.component.css']
})
clase de exportación Componente de prueba {
	// Puedes establecer el valor inicial en el constructor de FormControl, en este ejemplo es la cadena vacía nombre = new FormControl('');
}

Luego registre el control en la plantilla de la siguiente manera: test.component.html

<!-- test.component.html -->
<etiqueta>
  Nombre: <tipo de entrada="texto" [formControl]="nombre">
</etiqueta>
<!-- Si el valor ingresado en la entrada cambia, el valor mostrado aquí también cambiará -->
<p>nombre: {{ nombre.valor }}</p>

Para otras propiedades y métodos de FormControl , consulte el manual de referencia de API .

https://angular.cn/api/forms/FormControl#formcontrol

agrupa controles de formulario en FormGroup

Al igual que una instancia de FormControl le permite controlar el control correspondiente a un único cuadro de entrada, una instancia de FormGroup también puede rastrear un grupo de. Instancias FormControl (como el estado de un formulario). Cuando se crea FormGroup , cada control que contiene se rastrea por su nombre.

Vea la siguiente demostración de ejemplo: test.component.ts , test.component.html

import { Component } from '@angular/core';
importar {FormControl, FormGroup, Validators} desde '@angular/forms'

@Componente({
  selector: 'prueba de aplicación',
  URL de plantilla: './test.component.html',
  URL de estilo: ['./test.component.css']
})
la clase de exportación TestComponent implementa OnInit {
    constructor() {}

    perfilForm = nuevo FormGroup({
      nombre: nuevo FormControl('', [Validadores.required,Validators.pattern('[a-zA-Z0-9]*')]),
      apellido: nuevo FormControl('', Validadores.requerido),
    });
	
	enEnviar() {
		// Verifica los valores de cada campo en el grupo de control console.log(this.profileForm.value)
    }
}

<!-- perfilForm Este FormGroup está vinculado al elemento de formulario a través de la directiva FormGroup, creando una capa de comunicación entre el modelo y el cuadro de entrada en el formulario -->
<!-- La directiva FormGroup también escucha el evento de envío emitido por el elemento de formulario y emite un evento ngSubmit, lo que le permite vincular una función de devolución de llamada. -->
<formulario [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <etiqueta>
<!-- La directiva FormControlName vincula cada cuadro de entrada al control de formulario FormControl definido en FormGroup. Estos controles de formulario se comunicarán con los elementos correspondientes -->
      Nombre: <tipo de entrada="texto" formControlName="nombre">
    </etiqueta>
    <etiqueta>
      Apellido: <tipo de entrada="texto" formControlName="apellido">
    </etiqueta>
    <botón tipo="enviar" [disabled]="!profileForm.valid">Enviar</botón>
  </formulario>

  <p>{{ perfilForm.valor }}</p>
  <!-- El estado del grupo de control: NO VÁLIDO o VÁLIDO -->
  <p>{{ perfilForm.status }}</p>	
  <!-- Si el valor ingresado por el grupo de control es un valor válido: verdadero o falso-->
  <p>{{ perfilForm.valid }}</p>
  <!-- Ya sea para deshabilitar: verdadero o falso-->
  <p>{{ perfilForm.disabled }}</p>

Para otras propiedades y métodos de FormGroup , consulte el manual de referencia de API .

https://angular.cn/api/forms/FormGroup#formgroup

utiliza el servicio FormBuilder más simple para generar instancias de control

. En formularios responsivos, cuando necesita manejar varios formularios, crear manualmente varias instancias de control de formularios será muy tedioso. El servicio FormBuilder proporciona algunos métodos convenientes para generar controles de formulario. FormBuilder crea y devuelve estas instancias de la misma manera detrás de escena, solo que es más sencillo de usar.

FormBuilder es un proveedor de servicios inyectables proporcionado por ReactiveFormModule . Esta dependencia se puede inyectar simplemente agregándola al constructor del componente.

El servicio FormBuilder tiene tres métodos: control() , group() y array() . Estos métodos son métodos de fábrica para generar FormControl , FormGroup y FormArray respectivamente en la clase de componente.

Vea el siguiente ejemplo: test.component.ts

import { Component } from '@angular/core';
// 1. Importar FormBuilder
importar {FormBuilder, Validadores} desde '@angular/forms';

@Componente({
  selector: 'prueba de aplicación',
  URL de plantilla: './test.component.html',
  URL de estilo: ['./test.component.css']
})
clase de exportación Componente de prueba {
	// 2. Inyecte el constructor del servicio FormBuilder (FB privado: FormBuilder) { }
    ngOnInit() { }

    perfilForm = this.fb.group({
      nombre: ['', [Validadores.requeridos, Validadores.pattern('[a-zA-Z0-9]*')]],
      apellido: ['', Validadores.requeridos],
    });
    // Equivalente a // perfilForm = nuevo FormGroup({
    // nombre: nuevo FormControl('', [Validadores.required,Validators.pattern('[a-zA-Z0-9]*')]),
    // apellido: nuevo FormControl('', Validadores.requerido),
    // });

    enEnviar() {
      console.log(este.profileForm.valor)
      console.log(this.profileForm)
    }
}

En comparación, se puede encontrar que usar el servicio FormBuilder puede generar FormControl , FormGroup y FormArray de manera más conveniente sin tener que crear manualmente una new instancia cada vez.

Validadores de formulario Validadores

Para obtener una lista API completa de validadores de clase Validators , consulte el manual de API

https://angular.cn/api/forms/Validators.

La función validador ( Validators ) puede ser una función sincrónica o asincrónica.

• Validadores síncronos: estas funciones síncronas aceptan una instancia de control y devuelven un conjunto de errores de validación o nulos. Puede pasarlo como segundo parámetro al constructor al crear una instancia FormControl .
• Validadores asincrónicos: Estas funciones asincrónicas aceptan una instancia de control y devuelven una Promise u Observable , que luego emite un conjunto de errores de validación o nulos. Se pueden pasar como tercer parámetro al crear una instancia FormControl .

Por motivos de rendimiento, Angular no ejecutará validadores asíncronos hasta que todos los validadores síncronos hayan pasado. Estos errores de validación se establecen después de que se haya ejecutado cada validador asincrónico.

Validador Validadores clase API

https://angular.cn/api/forms/Validators

clase Validadores {
  static min(min: number): ValidatorFn // El valor mínimo que se permite ingresar static max(max: number): ValidatorFn // El valor máximo static requerido(control: AbstractControl): ValidationErrors null // Si es necesario static | requeridoTrue(control: AbstractControl): ValidationErrors | nulo
  correo electrónico estático (control: AbstractControl): ValidationErrors | null // Si es un formato de correo electrónico static minLength(minLength: número): ValidatorFn // Longitud mínima static maxLength(maxLength: número): ValidatorFn // Longitud máxima patrón estático (patrón: string | RegExp): ValidatorFn // Coincidencia regular static nullValidator(control: AbstractControl): ValidationErrors null // No hacer nada estático compose(validators: ValidatorFn[]): ValidatorFn |
  composeAsync estático (validadores: AsyncValidatorFn []): AsyncValidatorFn |
}

Función de validador incorporado

import {Validadores} desde '@angular/forms'

al crear una instancia del control FormControl

...
ngOnInit(): nulo {
  this.heroForm = nuevo grupo de formulario ({
  // Crea una instancia del nombre del control FormControl: new FormControl(this.hero.name, [
      Validators.required, // Validación, requerida Validators.minLength(4), // La longitud no es menor que 4
      prohibidoNameValidator(/bob/i) // Validador personalizado]),
    alterEgo: nuevo FormControl(this.hero.alterEgo),
    poder: nuevo FormControl (este.héroe.poder, Validadores.requeridos)
  });
}
obtener nombre() { return this.heroForm.get('nombre');

get power() { return this.heroForm.get('power');

Validador personalizado

Para conocer el contenido del validador personalizado, consulte el manual de API

https://angular.cn/guide/form-validation

A veces, integrado validación El procesador no puede satisfacer las necesidades muy bien. Por ejemplo, necesitamos verificar un formulario y el valor de entrada solo puede ser el valor en una determinada matriz, y el valor en esta matriz cambia en tiempo real a medida que se ejecuta el programa. Al mismo tiempo, el validador incorporado no puede cumplir con este requisito y es necesario crear un validador personalizado.

• Agregue validadores personalizados en formularios responsivos. En la sección del validador incorporado anterior, hay una función forbiddenNameValidator de la siguiente manera:

  import {Validadores} de '@angular/forms';
  ...
  ngOnInit(): nulo {
    this.heroForm = nuevo grupo de formulario ({
      nombre: nuevo FormControl(este.hero.nombre, [
        Se requieren validadores,
        Validadores.minLength(4),
        // 1. Agregar validador personalizado protectedNameValidator(/bob/i)
      ])
    });
  }
  // 2. Implementar un validador personalizado cuya función es prohibir el ingreso de valores con la función de exportación de cadena bob protectedNameValidator(nameRe: RegExp): ValidatorFn {
    retorno (control: AbstractControl): ValidationErrors | nulo => {
      const prohibido = nombreRe.test(control.valor);
      // 3. Devuelve nulo cuando el valor es válido, o devuelve el objeto de error de verificación cuando no es válido retorno prohibido? {nombre prohibido: {valor: control.valor}}: nulo;
    };
  }

  El validador devuelve null si el valor es válido, o验证错误对象si no es válido. Los objetos de error de autenticación suelen tener un atributo llamado clave de autenticación ( forbiddenName ). Su valor es un diccionario arbitrario que puede utilizar para insertar mensajes de error ({nombre}).

• Agregue validadores personalizados en formularios basados ​​en plantillas. Para agregar una directiva a la plantilla, la directiva contiene la función validator . Al mismo tiempo, esta directiva debe registrarse como proveedor de NG_VALIDATORS . Como se muestra a continuación:

  // 1. Importar clases relacionadas import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
  importar {Entrada} desde '@angular/core'
  
  @Directiva({
    selector: '[appForbiddenName]',
    // 2. Regístrese como proveedor de proveedores de tokens NG_VALIDATORS: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  clase de exportación ForbiddenValidatorDirective implementa Validador {
    @Input('appForbiddenName') nombre prohibido = '';
    // 3. Implementar la interfaz del validador, es decir, implementar la función de validación validar(control: AbstractControl): ValidationErrors | null {
    	// Devuelve nulo cuando el valor es válido, o devuelve el objeto de error de validación cuando no es válido return this.forbiddenName ? prohibitNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                                : nulo;
    }
  }
  // 4. Función de exportación de función de verificación personalizada prohibidaNameValidator(nameRe: RegExp): ValidatorFn {
    retorno (control: AbstractControl): ValidationErrors | nulo => {
      const prohibido = nombreRe.test(control.valor);
      // 3. Devuelve nulo cuando el valor es válido, o devuelve el objeto de error de verificación cuando no es válido retorno prohibido? {nombre prohibido: {valor: control.valor}}: nulo;
    };
  }

  Tenga en cuenta que las directivas de validación personalizadas se crean instancias con useExisting en lugar de useClass . Si se usa useClass en lugar de useExisting , se registrará una nueva instancia de clase, pero no tendrá forbiddenName .

  <tipo de entrada="texto" requiere appForbiddenName="bob" [(ngModel)]="hero.name">