Como começar rapidamente com VUE3.0: Entrando para aprender
O Angular fornece dois métodos diferentes para lidar com a entrada do usuário por meio de formulários:响应式表单e模板驱动表单. [Recomendação do tutorial relacionado: "Tutorial Angular"]
Apenas formulários responsivos são introduzidos aqui. Para formulários baseados em modelos, consulte o site oficial:
https://angular.cn/guide/forms-overview#setup-in-template-driven-forms
para usar o controle de formulário responsivo, você precisa importar ReactiveFormsModule do pacote @angular/forms e adicioná-lo ao array imports do seu NgModule . Como segue: app.module.ts
/***** app.module.ts *****/
importar {ReactiveFormsModule} de '@angular/forms';
@NgModule({
importações: [
// outras importações ...
Módulo Formulários Reativos
],
})
export class AppModule { } Existem três etapas para usar o controle de formulário.
Registre o módulo de formulário reativo em seu aplicativo. Este módulo declara algumas diretivas que você deseja usar em formulários reativos.
Gere uma nova instância FormControl e salve-a no componente.
Registre este FormControl no template.
Para registrar um controle de formulário, importe a classe FormControl e crie uma nova instância de FormControl , salvando-a como propriedade da classe. Como segue: test.component.ts
/***** test.component.ts *****/
importar {Componente} de '@angular/core';
importar { FormControl } de '@angular/forms';
@Componente({
seletor: 'editor de nome do aplicativo',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
classe de exportação TestComponent {
// Você pode definir o valor inicial no construtor do FormControl, neste exemplo é a string vazia name = new FormControl('');
} Em seguida, registre o controle no template da seguinte forma: test.component.html
<!-- test.component.html -->
<rótulo>
Nome: <input type="text" [formControl]="nome">
</label>
<!-- Se o valor inserido na entrada for alterado, o valor exibido aqui também será alterado -->
<p>name: {{ name.value }}</p> Para outras propriedades e métodos de
FormControl, consulte o manual de referência da API .https://angular.cn/api/forms/FormControl#formcontrol
Assim como uma instância de FormControl permite controlar o controle correspondente a uma única caixa de entrada, uma instância de FormGroup também pode rastrear um grupo de. Instâncias FormControl (como o status de um formulário). Quando FormGroup é criado, cada controle nele contido é rastreado por seu nome.
Veja o exemplo de demonstração a seguir: test.component.ts , test.component.html
import { Component } from '@angular/core';
importar {FormControl, FormGroup, Validators} de '@angular/forms'
@Componente({
seletor: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
classe de exportação TestComponent implementa OnInit {
construtor() {}
profileForm = novo FormGroup({
primeiroNome: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
sobrenome: novo FormControl('', Validators.required),
});
onSubmit() {
// Verifica os valores de cada campo no grupo de controle console.log(this.profileForm.value)
}
} <!-- profileForm Este FormGroup está vinculado ao elemento form através da diretiva FormGroup, criando uma camada de comunicação entre o modelo e a caixa de entrada no formulário -->
<!-- A diretiva FormGroup também escuta o evento submit emitido pelo elemento form e emite um evento ngSubmit, permitindo vincular uma função de retorno de chamada. -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<rótulo>
<!-- A diretiva FormControlName vincula cada caixa de entrada ao controle de formulário FormControl definido no FormGroup. Esses controles de formulário se comunicarão com os elementos correspondentes -->
Nome: <input type="text" formControlName="firstName">
</label>
<rótulo>
Sobrenome: <input type="text" formControlName="lastName">
</label>
<button type="submit" [disabled]="!profileForm.valid">Enviar</button>
</form>
<p>{{ profileForm.value }}</p>
<!-- O status do grupo de controle: INVALID ou VALID -->
<p>{{ profileForm.status }}</p>
<!-- Se o valor inserido pelo grupo de controle é um valor válido: verdadeiro ou falso-->
<p>{{ profileForm.valid }}</p>
<!-- Se desabilitar: verdadeiro ou falso-->
<p>{{ profileForm.disabled }}</p> Para outras propriedades e métodos de
FormGroup, consulte o manual de referência da API .https://angular.cn/api/forms/FormGroup#formgroup
. Em formulários responsivos, quando você precisa lidar com vários formulários, criar manualmente várias instâncias de controle de formulário será muito tedioso. O serviço FormBuilder fornece alguns métodos convenientes para gerar controles de formulário. FormBuilder cria e retorna essas instâncias da mesma maneira nos bastidores, apenas é mais simples de usar.
FormBuilder é um provedor de serviços injetável fornecido por ReactiveFormModule . Esta dependência pode ser injetada simplesmente adicionando-a ao construtor do componente.
O serviço
FormBuilderpossui três métodos:control(),group()earray(). Esses métodos são métodos de fábrica para gerarFormControl,FormGroupeFormArrayrespectivamente na classe do componente.
Veja o exemplo a seguir: test.component.ts
import { Component } from '@angular/core';
// 1. Importar FormBuilder
importar {FormBuilder, Validadores} de '@angular/forms';
@Componente({
seletor: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
classe de exportação TestComponent {
// 2. Injetar o construtor de serviço FormBuilder(private fb: FormBuilder) { }
ngOnInit() { }
profileForm = this.fb.group({
primeiroNome: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
sobrenome: ['', Validadores.required],
});
// Equivalente a // profileForm = new FormGroup({
// primeiroNome: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
// últimoNome: new FormControl('', Validators.required),
// });
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
} Em comparação, pode-se descobrir que o uso do serviço FormBuilder pode gerar FormControl , FormGroup e FormArray de maneira mais conveniente, sem a necessidade de criar manualmente uma new instância a cada vez.
Para obter uma lista completa de validadores da classe
Validators, consulte o manual da APIhttps://angular.cn/api/forms/Validators
A função validadora ( Validators ) pode ser uma função síncrona ou assíncrona.
FormControl .Promise ou Observable , que posteriormente emite um conjunto de erros de validação ou nulo. Eles podem ser passados como terceiro parâmetro ao instanciar FormControl .Por motivos de desempenho, Angular não executará validadores assíncronos até que todos os validadores síncronos tenham passado. Esses erros de validação são definidos após a execução de cada validador assíncrono.
https://angular.cn/api/forms/Validators
class Validators {
static min(min: number): ValidatorFn // O valor mínimo permitido ser inserido static max(max: number): ValidatorFn // O valor máximo static require(control: AbstractControl): ValidationErrors // Se é necessário static requeridoTrue(controle: AbstractControl): ValidationErrors null |
static email(control: AbstractControl): ValidationErrors | null // Se é um formato de e-mail static minLength(minLength: number): ValidatorFn // Comprimento mínimo static maxLength(maxLength: number): ValidatorFn // Comprimento máximo static pattern(pattern: string | RegExp): ValidatorFn // Correspondência regular static nullValidator(control: AbstractControl): ValidationErrors | null // Não faça nada static compose(validators: ValidatorFn[]): ValidatorFn |
static composeAsync(validadores: AsyncValidatorFn[]): AsyncValidatorFn |
} import { Validators } from '@angular/forms' ao instanciar o controle FormControl
...
ngOnInit(): void {
this.heroForm = novo FormGroup({
// Instancia o nome do controle FormControl: new FormControl(this.hero.name, [
Validators.required, // Validação, obrigatória Validators.minLength(4), // O comprimento não é inferior a 4
proibidoNameValidator(/bob/i) // Validador personalizado]),
alterEgo: novo FormControl(this.hero.alterEgo),
poder: novo FormControl(this.hero.power, Validators.required)
});
}
obter nome() { retornar this.heroForm.get('nome' });
get power() { return this.heroForm.get('power' } Para o conteúdo do validador personalizado, consulte o manual da API
https://angular.cn/guide/form-validation
Às vezes integrado validação O processador não pode atender muito bem às necessidades. Por exemplo, precisamos verificar um formulário e o valor de entrada só pode ser o valor em um determinado array, e o valor neste array muda em tempo real conforme o programa é executado. Ao mesmo tempo, o validador integrado não pode atender a esse requisito e um validador personalizado precisa ser criado.
Adicione validadores personalizados em formulários responsivos. Na seção do validador integrado acima, há uma função forbiddenNameValidator como segue:
import { Validators } from '@angular/forms';
...
ngOnInit(): void {
this.heroForm = novo FormGroup({
nome: novo FormControl (this.hero.name, [
Validadores.obrigatórios,
Validadores.minLength(4),
// 1. Adicionar validador personalizado proibidoNameValidator(/bob/i)
])
});
}
// 2. Implemente um validador customizado cuja função é proibir a entrada de valores com bob string export function proibidoNameValidator(nameRe: RegExp): ValidatorFn {
return (controle: AbstractControl): ValidationErrors | null => {
const proibido = nomeRe.test(control.value);
// 3. Retornar nulo quando o valor for válido ou retornar o objeto de erro de verificação quando for inválido return proibido {forbiddenName: {value: control.value}} : null;
};
} O validador retorna
nullse o valor for válido ou验证错误对象se for inválido. Objetos de erro de autenticação geralmente possuem um atributo chamado chave de autenticação (forbiddenName). Seu valor é um dicionário arbitrário que você pode usar para inserir mensagens de erro ({nome}).
Adicione validadores personalizados em formulários baseados em modelos. Para adicionar uma diretiva ao modelo, a diretiva contém a função validator . Ao mesmo tempo, esta diretiva precisa se registrar como provedora de NG_VALIDATORS . Conforme mostrado abaixo:
// 1. Importar classes relacionadas import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
importar {Input} de '@angular/core'
@Diretiva({
seletor: '[appForbiddenName]',
// 2. Registre-se como provedor de provedores de token NG_VALIDATORS: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
classe de exportação ForbiddenValidatorDirective implementa Validador {
@Input('appForbiddenName') nome proibido = '';
// 3. Implementar a interface do validador, ou seja, implementar a função de validação activate(control: AbstractControl): ValidationErrors |
// Retorna nulo quando o valor for válido ou retorna o objeto de erro de validação quando for inválido return this.forbiddenName ?
: nulo;
}
}
// 4. Função de verificação personalizada export function proibidoNameValidator(nameRe: RegExp): ValidatorFn {
return (controle: AbstractControl): ValidationErrors | null => {
const proibido = nomeRe.test(control.value);
// 3. Retornar nulo quando o valor for válido ou retornar o objeto de erro de verificação quando for inválido return proibido {forbiddenName: {value: control.value}} : null;
};
} Observe que as diretivas de validação customizadas são instanciadas com
useExistingem vez deuseClass. SeuseClassfor usado em vez deuseExisting, uma nova instância de classe será registrada, mas não teráforbiddenName.
<input type="text" obrigatório appForbiddenName="bob" [(ngModel)]="hero.name">