En Angular, hay dos tipos de formularios,模板驱动y模型驱动. [Tutoriales relacionados recomendados: "Tutorial angular"]
1.1 Descripción general
控制逻辑del formulario está escrita en组件模板, que es adecuada para tipos de formulario简单.
1.2 Comience rápidamente
1). Introduzca el módulo dependiente FormsModule
import { FormsModule } de "@angular/forms"
@NgModule({
importa: [Módulo de formularios],
})
export class AppModule {} 2) Convierta el formulario DOM a ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) Declare el campo del formulario como ngModel
<form #f= " ngForm" (enviar)="onSubmit(f)"> <tipo de entrada="texto" nombre="nombre de usuario" ngModel /> <botón>Enviar</botón> </form>
4) Obtenga el valor del campo del formulario
import { NgForm } de "@angular/forms"
exportar clase AppComponent {
onSubmit(formulario: NgForm) {
console.log(formulario.valor) // {nombre de usuario: ''}
}
} 5), agrupación de formularios
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="usuario">
<tipo de entrada="texto" nombre="nombre de usuario" ngModel />
</div>
<div ngModelGroup="contacto">
<tipo de entrada="texto" nombre="teléfono" ngModel />
</div>
<botón>Enviar</botón>
</form> importar { NgForm } desde "@angular/forms"
exportar clase AppComponent {
onSubmit(formulario: NgForm) {
console.log(form.value) // {contacto: {teléfono: ''}, usuario:{nombre de usuario: ''}}
}
} 1.3 Validación del formulario
<form #f="ngForm" (submit)="onSubmit(f)"> <tipo de entrada="texto" nombre="nombre de usuario" ngModel patrón requerido="d" /> <botón>Enviar</botón> </form>
exportar clase AppComponent {
onSubmit(formulario: NgForm) {
// Verifica si todo el formulario está verificado a través de console.log(form.valid)
}
} <!-- Deshabilitar el envío de formulario cuando todo el formulario no pasa la validación --> <button type="submit" [disabled]="f.invalid">Enviar</button>
muestra el mensaje de error cuando el elemento del formulario falla en la plantilla del componente.
<formulario #f="ngForm" (enviar)="onSubmit(f)">
<entrada #nombredeusuario="ngModel" />
<div *ngIf="nombre de usuario.tocado &&!nombre de usuario.válido && nombre de usuario.errores">
<div *ngIf="username.errors.required">Por favor, complete el nombre de usuario</div>
<div *ngIf="username.errors.pattern">No se ajusta a las reglas habituales</div>
</div>
</form> Especifica el estilo cuando el elemento del formulario no supera la validación.
entrada.ng-tocado.ng-inválido {
borde: 2px rojo sólido;
} 2.1 Descripción general
控制逻辑del formulario está escrita en组件类, que tiene más control sobre la lógica de verificación y es adecuada para tipos de formulario复杂.
En un formulario basado en modelo, el campo del formulario debe ser una instancia de FormControl . El objeto de instancia puede验证表单字段, si el valor se ha modificado, etc.
Un conjunto de campos de formulario constituye el formulario completo, y todo el formulario debe ser una instancia de FormGroup , que puede realizar una validación整体en el formulario.
FormControl: un elemento de formulario en un grupo de formularios.
FormGroup: un grupo de formularios. El formulario es al menos un FormGroup
: se utiliza para formularios complejos. Puede agregar dinámicamente elementos de formulario o grupos de formularios. falla y el todo falla.
2.2 Comience rápidamente
1), presente ReactiveFormsModule
import {ReactiveFormsModule} de "@angular/forms"
@NgModule({
importaciones: [Módulo de formularios reactivos]
})
export class AppModule {} 2). Cree el objeto de control de formulario FormGroup en la clase de componente
import { FormControl, FormGroup } de "@angular/forms"
exportar clase AppComponent {
formulario de contacto: Grupo de formulario = nuevo Grupo de formulario ({
nombre: nuevo FormControl(),
teléfono: nuevo FormControl()
})
} 3). Formulario en la plantilla del componente asociado
<form [formGroup]="contactForm" (submit)="onSubmit()"> <tipo de entrada="texto" formControlName="nombre" /> <tipo de entrada="texto" formControlName="teléfono" /> <botón>Enviar</botón> </form>
4). Obtenga el valor del formulario
de exportación de clase AppComponent {
enEnviar() {
console.log(this.contactForm.valor)
}
} 5). Establezca el valor predeterminado del formulario
contactForm: FormGroup = new FormGroup({
nombre: nuevo FormControl("Valor predeterminado"),
teléfono: nuevo FormControl(15888888888)
}) 6), formulario de agrupación
contactForm: FormGroup = new FormGroup({
nombre completo: nuevo grupo de formulario ({
nombre: nuevo FormControl(),
apellido: nuevo FormControl()
}),
teléfono: nuevo FormControl()
}) <formulario [formGroup]="contactForm" (submit)="onSubmit()">
<div formGroupName="nombre completo">
<tipo de entrada="texto" formControlName="primerNombre" />
<tipo de entrada="texto" formularioControlName="apellido" />
</div>
<tipo de entrada="texto" formControlName="teléfono" />
<botón>Enviar</botón>
</form> onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["nombre", "nombre de usuario"])?.valor)
} 2.3
Requisitos de FormArray: un grupo de información de contacto se muestra en la página de forma predeterminada y se pueden agregar más grupos de información de contacto haciendo clic en el botón.
importar {Componente, OnInit} desde "@angular/core"
importar {FormArray, FormControl, FormGroup} desde "@angular/forms"
@Componente({
selector: "raíz de aplicación",
URL de plantilla: "./app.component.html",
estilos: []
})
la clase de exportación AppComponent implementa OnInit {
// formulario de contactoForm: FormGroup = nuevo FormGroup({
contactos: nuevo FormArray([])
})
obtener contactos() {
devolver this.contactForm.get("contactos") como FormArray
}
//Agregar información de contacto addContact() {
//Información de contacto const myContact: FormGroup = new FormGroup({
nombre: nuevo FormControl(),
dirección: nuevo FormControl(),
teléfono: nuevo FormControl()
})
//Agregar información de contacto a la matriz de información de contacto this.contacts.push(myContact)
}
// Eliminar información de contacto removeContact(i: número) {
estos.contactos.removeAt(i)
}
ngOnInit() {
//Agregar información de contacto predeterminada this.addContact()
}
enEnviar() {
console.log(this.contactForm.valor)
}
} <formulario [formGroup]="contactForm" (submit)="onSubmit()">
<div formArrayName="contactos">
<div
*ngFor="dejar contacto de contactos.controles; dejar i = indexar"
[formGroupName]="yo"
>
<tipo de entrada="texto" formControlName="nombre" />
<tipo de entrada="texto" formControlName="dirección" />
<tipo de entrada="texto" formControlName="teléfono" />
<button (click)="removeContact(i)">Eliminar información de contacto</button>
</div>
</div>
<button (click)="addContact()">Agregar información de contacto</button>
<botón>Enviar</botón>
</form> 2.4 Validador de formulario integrado
1) Utilice las reglas de validación proporcionadas por el validador integrado para validar los campos del formulario
importados { FormControl, FormGroup, Validators } desde "@angular/forms"
formulario de contacto: Grupo de formulario = nuevo Grupo de formulario ({
nombre: nuevo FormControl("Valor predeterminado", [
Se requieren validadores,
Validadores.minLength(2)
])
}) 2). Obtenga si el formulario completo ha pasado la verificación
onSubmit() {
console.log(this.contactForm.válido)
} <!-- Deshabilitar los botones del formulario cuando todo el formulario no pasa la verificación --> <button [disabled]="contactForm.invalid">Enviar</button>
3). Muestra el mensaje de error cuando se pasa la verificación en la plantilla del componente
get name() {
¡devuelve this.contactForm.get("nombre")!
} <formulario [formGroup]="contactForm" (submit)="onSubmit()">
<tipo de entrada="texto" formControlName="nombre" />
<div *ngIf="nombre.tocado && nombre.inválido && nombre.errores">
<div *ngIf="name.errors.required">Por favor, introduzca su nombre</div>
<div *ngIf="nombre.errores.maxlength">
La longitud del nombre no puede ser mayor que {{ name.errors.maxlength.requiredLength }}. La longitud real es {{ name.errors.maxlength.actualLength }}.
</div>
</div>
</form> 2.5 Validador de formulario síncrono personalizado
El tipo de validador personalizado es la clase TypeScript
. La clase contiene métodos de verificación específicos. El método de verificación debe ser un método estático.
El método de verificación tiene un control de parámetro, de tipo AbstractControl. De hecho, es el tipo de objeto de instancia de la clase FormControl.
Si la verificación es exitosa, se devuelve nulo.
Si la verificación falla, el objeto se devuelve. El atributo en el objeto es la identificación de verificación. verdadero, lo que indica que la verificación falló.
El valor de retorno del método de verificación es ValidationErrors | null
import {AbstractControl, ValidationErrors} de "@angular/forms".
clase de exportación NameValidators {
// Los valores de campo no pueden contener espacios estáticos no puedenContainSpace(control: AbstractControl): ValidationErrors |
// La verificación falló si (/s/.test(control.value)) return { cancontainSpace: true }
//La verificación pasó y devuelve nulo
}
} importar {Validadores de nombres} desde "./Validadores de nombres"
formulario de contacto: Grupo de formulario = nuevo Grupo de formulario ({
nombre: nuevo FormControl("", [
Se requieren validadores,
NameValidators.cannotContainSpace
])
}) <div *ngIf="nombre.tocado && nombre.inválido && nombre.errores"> <div *ngIf="name.errors.cannotContainSpace">El nombre no puede contener espacios</div> </div>
2.6 Importación del validador de formulario asincrónico personalizado
{AbstractControl, ValidationErrors} desde "@angular/forms"
importar {Observable} desde "rxjs"
clase de exportación NameValidators {
estático deberíaBeUnique(control: AbstractControl): Promesa<ValidationErrors | null> {
devolver nueva Promesa(resolver => {
si (control.valor == "admin") {
resolver ({ debería ser único: verdadero })
} demás {
resolver (nulo)
}
})
}
} formulario de contacto: GrupoForm = nuevo GrupoForm({
nombre: nuevo FormControl(
"",
[
Validadores.requeridos
],
NameValidators.shouldBeUnique
)
}) <div *ngIf="nombre.tocado && nombre.inválido && nombre.errores"> <div *ngIf="name.errors.shouldBeUnique">Nombre de usuario duplicado</div> </div> <div *ngIf="name.pending">Detectar si los nombres están duplicados</div>
2.7
快捷a FormBuilder para crear un formulario.
this.fb.control : elemento de formulario
this.fb.group : grupo de formularios, el formulario es al menos un FormGroup
this.fb.array : utilizado para formularios complejos, puede agregar dinámicamente elementos de formulario o grupos de formularios, durante la validación del formulario, allí es un FormArray El elemento falló y el conjunto falló.
importar {FormBuilder, FormGroup, Validators} desde "@angular/forms"
exportar clase AppComponent {
formulario de contacto: grupo de formularios
constructor(FB privado: FormBuilder) {
este.contactForm = este.fb.group({
nombre completo: este.fb.group({
nombre: ["", [Validadores.requeridos]],
apellido: [""]
}),
teléfono: []
})
}
} 2.8 Monitorear cambios en los valores del formulario
En el trabajo real, a menudo necesitamos realizar el procesamiento correspondiente en función de los cambios en un valor del formulario. Generalmente, podemos usar ngModalChange o un formulario para lograr
2.8.1 ngModalChange
<div>. <tipo de entrada="texto" [(ngModal)]="nombre" (ngModalChange)="nombreChange()" /> </div>
importar { FormControl, FormGroup } desde "@angular/forms"
exportar clase AppComponent {
nombre público = 'a';
cambio de nombre público() {
}
} Angular oficialmente no recomienda el uso de ngModalChange.
2.8.2 Control de formulario
<div [formGroup]="contactForm"> <tipo de entrada="texto" formControlName="nombre" /> </div>
importar { FormControl, FormGroup } desde "@angular/forms"
exportar clase AppComponent {
formulario de contacto: Grupo de formulario = nuevo Grupo de formulario ({
nombre: nuevo FormControl()
})
ngOnInt() {
this.contactForm.get("nombre").valueChanges.subscribe(datos => {
consola.log(datos);
}
}
} 2.9 Ejercicio
1), Obtener el valor seleccionado en un grupo de casillas de verificación
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="dejar elemento de datos">
<tipo de entrada="casilla de verificación" [valor]="item.value" (cambio)="onChange($evento)" />
{{ elemento.nombre }}
</etiqueta>
<botón>Enviar</botón>
</form> importar { Componente } desde "@angular/core"
importar {FormArray, FormBuilder, FormGroup} desde "@angular/forms"
datos de interfaz {
nombre: cadena
valor: cadena
}
@Componente({
selector: "casilla de verificación de aplicación",
URL de plantilla: "./checkbox.component.html",
estilos: []
})
exportar clase CheckboxComponent {
Datos: Matriz<Datos> = [
{ nombre: "Pera", valor: "pera" },
{ nombre: "Ciruela", valor: "ciruela" },
{ nombre: "Kiwi", valor: "kiwi" },
{ nombre: "Apple", valor: "manzana" },
{ nombre: "Lima", valor: "Lima" }
]
formulario: grupo de formularios
constructor(FB privado: FormBuilder) {
este.formulario = este.fb.group({
checkArray: this.fb.array([])
})
}
onChange(evento: Evento) {
objetivo constante = event.target como HTMLInputElement
constante marcado = objetivo.marcado
valor constante = valor.objetivo
const checkArray = this.form.get("checkArray") como FormArray
si (marcado) {
checkArray.push(this.fb.control(valor))
} demás {
índice constante = checkArray.controls.findIndex(
control => control.valor === valor
)
checkArray.removeAt(índice)
}
}
enEnviar() {
console.log(este.formulario.valor)
}
} 2). Obtenga el valor seleccionado en el botón de opción
exportar clase AppComponent {
formulario: grupo de formularios
constructor (FB público: FormBuilder) {
this.form = this.fb.group({ género: "" })
}
enEnviar() {
console.log(este.formulario.valor)
}
} <formulario [formGroup]="formulario" (enviar)="onSubmit()"> <tipo de entrada="radio" valor="hombre" formControlName="género" /> Hombre <input type="radio" value="female" formControlName="gender" /> Mujer <botón tipo="enviar">Enviar</botón> </form>
2.10 Otro
patchValue: establece el valor del control de formulario (puede configurar todos, o puede configurar uno de ellos, los demás no se ven afectados)
setValue: establece el valor del control de formulario (establece todo, no se puede excluir cualquiera)
valueChanges: Cuando el formulario El evento de reinicio se activa cuando el valor del control cambia
: el contenido del formulario está en blanco