A "tipagem estrita de formulários reativos angulares" introduzida no Angular 14 é um recurso poderoso que melhora ainda mais a segurança de tipo e a capacidade de manutenção de aplicativos Angular, especialmente ao lidar com formulários. Esse recurso permite que os desenvolvedores definam com mais precisão os tipos de controles e modelos de formulário, reduzindo possíveis erros de tempo de execução e fornecendo melhores dicas de código e documentação. Neste artigo, nos aprofundaremos na digitação estrita de formulários reativos angulares introduzidos no Angular 14 e forneceremos exemplos detalhados.
O que são formas reativas angulares?
Antes de entrar nos detalhes da digitação estrita, vamos primeiro entender os conceitos básicos das formas reativas angulares. Angular Reactive Forms é uma abordagem modular e reativa para trabalhar com formulários. Ao contrário dos formulários baseados em modelos, os Formulários Reativos nos permitem criar e manipular formulários em código, o que fornece mais flexibilidade e controle sobre interações complexas de formulários.
Os conceitos básicos dos Formulários Reativos incluem:
- FormControl: Representa o estado e o valor do controle do formulário.
- FormGroup: Organize vários FormControls juntos para formar um grupo lógico.
- FormBuilder: fornece uma maneira mais conveniente de criar FormGroup e FormControl.
- Validadores: regras usadas para validar entradas de formulário, como campos obrigatórios, comprimento mínimo, etc.
Ao usar esses conceitos, os desenvolvedores podem criar formulários complexos e ouvir facilmente alterações nos valores do formulário por meio da funcionalidade Observable do RxJS.
O conceito de digitação estrita
No Angular 14, a digitação estrita de Formulários Reativos Angulares introduz uma verificação de tipo mais rigorosa, o que significa que podemos especificar com mais precisão o tipo do modelo de formulário e o tipo de controle de formulário. Esse aprimoramento de segurança de tipo ajuda a detectar possíveis erros em tempo de compilação e evitar incompatibilidade de tipo ou problemas de referência nula em tempo de execução.
A ideia central da digitação estrita é garantir que nosso modelo de formulário seja consistente com a estrutura real do formulário por meio do sistema de tipos do TypeScript. A vantagem disso é que os desenvolvedores podem aproveitar as vantagens dos recursos de inferência de tipo e preenchimento automático do TypeScript, tornando mais fácil escrever o código correto e ser capazes de obter informações detalhadas sobre a estrutura do formulário no editor.
A seguir, vamos nos aprofundar em como usar a digitação estrita de formulários reativos angulares em Angular 14 e ilustrá-lo com exemplos.
Comece com digitação estrita
Para começar a usar digitação estrita, primeiro certifique-se de que seu projeto Angular tenha sido atualizado para Angular 14 ou superior. Então, você precisa entender os seguintes conceitos principais:
-
Tipo FormGroup : Ao criar um FormGroup, agora podemos atribuir a ele um tipo para deixar claro quais controles de formulário ele contém. Este tipo é um objeto, seu nome de propriedade é o nome do controle e seu valor é o tipo do controle.
-
Tipo FormControl : Da mesma forma, ao criar um FormControl, podemos especificar um tipo para ele especificar o tipo do valor do controle.
-
FormBuilder digitado : ao usar o FormBuilder para criar um FormGroup, podemos usar genéricos para especificar o tipo de FormGroup. Isso torna a criação de formulários mais concisa e com digitação segura.
Agora, vamos examinar um exemplo detalhado para demonstrar como usar digitação estrita para construir formulários reativos angulares.
Exemplo detalhado
Digamos que estamos construindo um formulário de cadastro simples com os seguintes campos:
- Nome de usuário (obrigatório, tipo string)
- Endereço de e-mail (string de endereço de e-mail válida e obrigatória)
- Senha (obrigatória, tipo string, comprimento mínimo de 6 caracteres)
Primeiro, vamos criar um UserRegistrationcomponente Angular chamado e depois construir o formulário de registro usando digitação estrita neste componente.
Crie um modelo de formulário
Primeiro, precisamos definir o tipo de modelo de formulário. Podemos criar uma interface TypeScript no componente para representar o modelo de formulário. Neste exemplo, chamamos isso de RegistrationFormModel.
// user-registration.component.ts
import {
Component } from '@angular/core';
import {
FormBuilder, FormGroup, Validators } from '@angular/forms';
interface RegistrationFormModel {
username: string;
email: string;
password: string;
}
Crie FormGroup usando digitação estrita
A seguir, criaremos um FormGroup usando digitação estrita e especificaremos o tipo de cada controle. Também podemos aplicar Validadores no FormGroup para validar a entrada.
// user-registration.component.ts
@Component({
selector: 'app-user-registration',
templateUrl: './user-registration.component.html',
})
export class UserRegistrationComponent {
registrationForm: FormGroup;
constructor(private fb: FormBuilder) {
// 使用 FormBuilder 创建 FormGroup，并指定类型
this.registrationForm = this.fb.group<RegistrationFormModel>({
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
});
}
}
No código acima, usamos this.fb.group<RegistrationFormModel>({ ... })para criar o FormGroup e especificar RegistrationFormModelo tipo explicitamente. Isso garante que nosso FormGroup contenha controles consistentes com o modelo.
Vincular controles de formulário no modelo
A seguir, precisamos vincular os controles do formulário no modelo do componente para que o usuário possa interagir com o formulário.
<!-- user-registration.component.html -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
formControlName="username"
class="form-control"
/>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
formControlName="email"
class="form-control"
/>
</div>
<div class="form-group">
<label
for="password">Password</label>
<input
type="password"
id="password"
formControlName="password"
class="form-control"
/>
</div>
<button type="submit" [disabled]="!registrationForm.valid">
Register
</button>
</form>
No modelo, usamos a diretiva para associar formGroupo formulário e a diretiva para associar cada campo de entrada ao controle de formulário correspondente.registrationFormformControlName
Lidar com o envio do formulário
Finalmente, precisamos lidar com o envio do formulário. Podemos criar um método no componente para tratar o envio e vinculá-lo ao ngSubmitevento do formulário no template.
// user-registration.component.ts
@Component({
// ...
})
export class UserRegistrationComponent {
// ...
onSubmit() {
if (this.registrationForm.valid) {
// 提交表单逻辑
const formData = this.registrationForm.value;
console.log('Form Data:', formData);
}
}
}
No onSubmitmétodo, primeiro verificamos a validade do formulário, depois obtemos o valor do formulário e executamos a lógica de envio correspondente.
para concluir
Neste artigo, apresentamos em detalhes o conceito e o uso da digitação estrita de formulários reativos angulares introduzidos no Angular 14. Ao usar digitação estrita, os desenvolvedores podem detectar possíveis erros relacionados ao formulário em tempo de compilação, melhorando a qualidade e a capacidade de manutenção de seu código. Demonstramos através de um exemplo como criar um formulário de registro com segurança de tipo em Angular 14, incluindo a definição do modelo de formulário, a criação de um FormGroup, a vinculação dos controles do formulário no modelo e o tratamento do envio do formulário.
Esse recurso torna os aplicativos Angular mais fáceis de manter e estender, especialmente para cenários de formulários complexos. Ao combinar o poder do Angular e do TypeScript, os desenvolvedores podem criar aplicativos robustos com maior confiança e, ao mesmo tempo, reduzir possíveis erros de tempo de execução. Espero que este artigo ajude você a entender melhor e aproveitar as vantagens do recurso de digitação estrita do Angular 14.