No Angular, existem dois tipos de formulários,模板驱动e模型驱动. [Tutoriais relacionados recomendados: "Tutorial Angular"]
1.1 Visão geral
控制逻辑do formulário é escrita no组件模板, que é adequado para tipos de formulário简单.
1.2 Comece rapidamente
1). Apresente o módulo dependente FormsModule
import { FormsModule } from "@angular/forms"
@NgModule({
importações: [FormsModule],
})
export class AppModule {} 2) Converta o formulário DOM em ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) Declare o campo do formulário como ngModel
<form #f= " ngForm" (enviar)="onSubmit(f)"> <input type="text" name="nome de usuário" ngModel /> <botão>Enviar</button> </form>
4). Obtenha o valor do campo do formulário
import { NgForm } de "@angular/forms"
classe de exportação AppComponent {
onSubmit(formulário: NgForm) {
console.log(form.value) // {nome de usuário: ''}
}
} 5), agrupamento de formulários
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="usuário">
<input type="text" name="nome de usuário" ngModel />
</div>
<div ngModelGroup="contato">
<input type="text" name="phone" ngModel />
</div>
<botão>Enviar</button>
</form> importe { NgForm } de "@angular/forms"
classe de exportação AppComponent {
onSubmit(formulário: NgForm) {
console.log(form.value) // {contato: {telefone: ''}, usuário:{nome de usuário: ''}}
}
} 1.3 Validação de formulário campo
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel requer padrão="d" /> <botão>Enviar</button> </form>
exportar classe AppComponent {
onSubmit(formulário: NgForm) {
// Verifica se todo o formulário foi verificado através de console.log(form.valid)
}
} <!-- Desabilitar o envio do formulário quando todo o formulário falhar na validação --> <button type="submit" [disabled]="f.invalid">Enviar</button>
exibe a mensagem de erro quando o item do formulário falha no modelo de componente.
<form #f="ngForm" (submit)="onSubmit(f)">
<input #username="ngModel" />
<div *ngIf="nome de usuário.touched && !nome de usuário.valid && nome de usuário.errors">
<div *ngIf="username.errors.required">Por favor, preencha o nome de usuário</div>
<div *ngIf="username.errors.pattern">Não está em conformidade com as regras regulares</div>
</div>
</form> Especifica o estilo quando o item do formulário falha na validação.
input.ng-touched.ng-inválido {
borda: 2px vermelho sólido;
} 2.1 Visão geral
控制逻辑do formulário é escrita na组件类, que tem mais controle sobre a lógica de verificação e é adequada para tipos de formulário复杂.
Em um formulário baseado em modelo, o campo do formulário precisa ser uma instância da classe FormControl . O objeto de instância pode验证表单字段, se o valor foi modificado, etc.
Um conjunto de campos de formulário constitui o formulário inteiro, e todo o formulário precisa ser uma instância da classe FormGroup , que pode realizar a validação整体no formulário.
FormControl: um item de formulário em um grupo de formulários.
FormGroup: um grupo de formulários.
Durante a validação do formulário, um item no FormArray. falha e o todo falha.
2.2 Comece rapidamente
1), introduza ReactiveFormsModule
import { ReactiveFormsModule } from "@angular/forms"
@NgModule({
importações: [ReactiveFormsModule]
})
export class AppModule {} 2). Crie o objeto de controle de formulário FormGroup na classe de componente
import { FormControl, FormGroup } de "@angular/forms"
classe de exportação AppComponent {
contactForm:FormGroup = new FormGroup({
nome: novo FormControl(),
telefone: novo FormControl()
})
} 3). Formulário no modelo de componente associado
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="nome" /> <input type="text" formControlName="telefone" /> <botão>Enviar</button> </form>
4). Obtenha o valor do formulário
export class AppComponent {
onSubmit() {
console.log(this.contactForm.value)
}
} 5). Defina o valor padrão do formulário
contactForm: FormGroup = new FormGroup({
nome: novo FormControl("Valor padrão"),
telefone: novo FormControl (15888888888)
}) 6), agrupamento de formulários
contactForm: FormGroup = new FormGroup({
nome completo: novo FormGroup({
primeiroNome: novo FormControl(),
sobrenome: novo FormControl()
}),
telefone: novo FormControl()
}) <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formGroupName="nome completo">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="sobrenome" />
</div>
<input type="text" formControlName="telefone" />
<botão>Enviar</button>
</form> onSubmit() {
console.log(este.contactForm.valor.nome.nomedeusuário)
console.log(this.contactForm.get(["nome", "nome de usuário"])?.valor)
} 2.3
Requisitos do FormArray: Um grupo de informações de contato é exibido na página por padrão e mais grupos de informações de contato podem ser adicionados clicando no botão.
importar { Componente, OnInit } de "@angular/core"
importar {FormArray, FormControl, FormGroup} de "@angular/forms"
@Componente({
seletor: "app-root",
templateUrl: "./app.component.html",
estilos: []
})
classe de exportação AppComponent implementa OnInit {
// formulário contactForm: FormGroup = new FormGroup({
contatos: novo FormArray([])
})
obter contatos() {
retorne this.contactForm.get("contatos") como FormArray
}
//Adicionar informações de contato addContact() {
//Informações de contato const myContact: FormGroup = new FormGroup({
nome: novo FormControl(),
endereço: novo FormControl(),
telefone: novo FormControl()
})
//Adiciona informações de contato à matriz de informações de contato this.contacts.push(myContact)
}
// Excluir informações de contato removeContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
//Adiciona informações de contato padrão this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formArrayName="contatos">
<div
*ngFor="deixe contato de contatos.controles; deixe i = index"
[formGroupName]="i"
>
<input type="text" formControlName="nome" />
<input type="text" formControlName="address" />
<input type="text" formControlName="telefone" />
<button (click)="removeContact(i)">Remover informações de contato</button>
</div>
</div>
<button (click)="addContact()">Adicionar informações de contato</button>
<botão>Enviar</button>
</form> 2.4 Validador de formulário integrado
1) Use as regras de validação fornecidas pelo validador integrado para validar os campos do formulário
import { FormControl, FormGroup, Validators } from "@angular/forms"
contactForm:FormGroup = new FormGroup({
nome: new FormControl("Valor padrão", [
Validadores.obrigatórios,
Validadores.minLength(2)
])
}) 2). Verifique se todo o formulário passou na verificação
onSubmit() {
console.log(this.contactForm.valid)
} <!-- Desativar botões do formulário quando todo o formulário falhar na verificação --> <button [disabled]="contactForm.invalid">Enviar</button>
3). Exibe a mensagem de erro quando a verificação é aprovada no modelo de componente
get name() {).
retorne this.contactForm.get("nome")!
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<input type="text" formControlName="nome" />
<div *ngIf="nome.touched && nome.inválido && nome.errors">
<div *ngIf="name.errors.required">Por favor, preencha seu nome</div>
<div *ngIf="name.errors.maxlength">
O comprimento do nome não pode ser maior que {{ name.errors.maxlength.requiredLength }}. O comprimento real é {{ name.errors.maxlength.actualLength }}.
</div>
</div>
</form> 2.5 Validador de formulário síncrono customizado
O tipo de validador customizado é a classe TypeScript
. A classe contém métodos de verificação específicos. O método de verificação deve ser um método estático.
O método de verificação possui um controle de parâmetro, do tipo AbstractControl. Na verdade, é o tipo de objeto de instância da classe FormControl.
Se a verificação for bem-sucedida, será retornado nulo.
Se a verificação falhar, o objeto será retornado. verdadeiro, indicando que a verificação falhou.
O valor de retorno do método de verificação é ValidationErrors | null
import { AbstractControl, ValidationErrors } from "@angular/forms"
exportar classe NameValidators {
// Os valores dos campos não podem conter espaços static canContainSpace(control: AbstractControl): ValidationErrors |
// Falha na verificação if (/s/.test(control.value)) return { não podeContainSpace: true }
//Verificação passada retorna nulo
}
} importar {NameValidators} de "./Name.validators"
contactForm:FormGroup = new FormGroup({
nome: novo FormControl("", [
Validadores.obrigatórios,
NameValidators.cannotContainSpace
])
}) <div *ngIf="nome.touched && nome.invalid && nome.errors"> <div *ngIf="name.errors.cannotContainSpace">O nome não pode conter espaços</div> </div>
2.6 Importação do validador de formulário assíncrono personalizado
{ AbstractControl, ValidationErrors } de "@angular/forms"
importar {Observável} de "rxjs"
exportar classe NameValidators {
static deveriaBeUnique(controle: AbstractControl): Promise<ValidationErrors | null> {
retornar nova promessa(resolver => {
if (control.value == "admin") {
resolver({deve serUnique: verdadeiro})
} outro {
resolver (nulo)
}
})
}
} contactForm: FormGroup = new FormGroup({
nome: novo FormControl(
"",
[
Validadores.requeridos
],
NameValidators.shouldBeUnique
)
}) <div *ngIf="nome.touched && nome.invalid && nome.errors"> <div *ngIf="name.errors.shouldBeUnique">Nome de usuário duplicado</div> </div> <div *ngIf="name.pending">Detectando se nomes são duplicados</div>
2.7
快捷do FormBuilder para criar um formulário.
this.fb.control : item de formulário
this.fb.group : grupo de formulários, o formulário é pelo menos um FormGroup
this.fb.array : usado para formulários complexos, você pode adicionar itens de formulário ou grupos de formulários dinamicamente, durante a validação do formulário, há é um FormArray O item falhou e o todo falhou.
importar {FormBuilder, FormGroup, Validators} de "@angular/forms"
classe de exportação AppComponent {
contatoForm: FormGroup
construtor(fb privado: FormBuilder) {
this.contactForm = this.fb.group({
nome completo: this.fb.group({
primeiroNome: ["", [Validators.required]],
sobrenome: [""]
}),
telefone: []
})
}
} 2.8 Monitorando alterações nos valores do formulário
No trabalho real, geralmente precisamos realizar o processamento correspondente com base nas alterações no valor do formulário. Geralmente, podemos usar ngModalChange ou um formulário para obter
2.8.1 ngModalChange
<div>. <input type="text" [(ngModal)]="nome" (ngModalChange)="nameChange()" /> </div>
importe { FormControl, FormGroup } de "@angular/forms"
classe de exportação AppComponent {
nome público = 'a';
nome públicoAlterar() {
}
} Angular oficialmente não recomenda o uso de ngModalChange.
2.8.2 Controle de formulário
<div [formGroup]="contactForm"> <input type="text" formControlName="nome" /> </div>
importe { FormControl, FormGroup } de "@angular/forms"
classe de exportação AppComponent {
contactForm:FormGroup = new FormGroup({
nome: novo FormControl()
})
ngOnInt() {
this.contactForm.get("nome").valueChanges.subscribe(dados => {
console.log(dados);
}
}
} 2.9 Exercício
1), Obtenha o valor selecionado em um grupo de caixas de seleção
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="let item de dados">
<input type="checkbox" [value]="item.value" (change)="onChange($event)" />
{{ item.nome }}
</label>
<botão>Enviar</button>
</form> importe {Componente} de "@angular/core"
importar {FormArray, FormBuilder, FormGroup} de "@angular/forms"
dados de interface {
nome: string
valor: string
}
@Componente({
seletor: "caixa de seleção do aplicativo",
templateUrl: "./checkbox.component.html",
estilos: []
})
classe de exportação CheckboxComponent {
Dados: Matriz<Dados> = [
{nome: "Pêra", valor: "pêra" },
{ nome: "Ameixa", valor: "ameixa" },
{nome: "Kiwi", valor: "kiwi" },
{ nome: "Apple", valor: "apple" },
{nome: "Limão", valor: "Limão" }
]
formulário: FormGroup
construtor(fb privado: FormBuilder) {
este.form = este.fb.grupo({
checkArray: this.fb.array([])
})
}
onChange(evento: Evento) {
const target = event.target como HTMLInputElement
const verificado = target.checked
valor const = alvo.valor
const checkArray = this.form.get("checkArray") as FormArray
if (marcado) {
checkArray.push(this.fb.control(valor))
} outro {
índice const = checkArray.controls.findIndex(
controle => controle.valor === valor
)
checkArray.removeAt(índice)
}
}
onSubmit() {
console.log(este.formulário.valor)
}
} 2). Obtenha o valor selecionado no botão de opção
export class AppComponent {
formulário: FormGroup
construtor(fb público: FormBuilder) {
this.form = this.fb.group({gênero: "" })
}
onSubmit() {
console.log(este.formulário.valor)
}
} <form [formGroup]="form" (submit)="onSubmit()"> <input type="radio" value="male" formControlName="gender" /> Masculino <input type="radio" value="female" formControlName="gender" /> Feminino <button type="submit">Enviar</button> </form>
2.10 Outro
patchValue: Defina o valor do controle de formulário (você pode definir todos, ou você pode definir um deles, os outros não serão afetados)
setValue: Defina o valor do controle de formulário (definir todos, não pode excluir qualquer um)
valueChanges: Quando o formulário O evento de redefinição é acionado quando o valor do controle muda
: o conteúdo do formulário fica em branco