Validação de forma reativa Angular

    What are reactive forms in Angular?

    Formulários reativos no Angular fornecem um acesso direto ao modelo de objeto de formulário subjacente, oferecendo uma abordagem imutável e explícita para lidar com entradas de formulário. Conforme os valores dessas entradas mudam no tempo, o estado do formulário é gerenciado por formulários reativos, contando com métodos fixos ou inflexíveis.

    O que significa que, cada vez que uma mudança é acionada no modelo de dados, os chamados operadores observáveis retornam um novo modelo de dados, em vez de atualizar o já existente repetidamente. E isso mantém o estado de um formulário limpo.

    As formas reativas Angular são consideradas extremamente escaláveis, reutilizáveis e robustas devido a:

    Imutabilidade

    Formulários reativos no Angular fornecem uma estrutura de dados imutável ou fixa. Uma vez que o estado do modelo subjacente é alterado, você obtém uma nova “versão” deste modelo em particular que é atualizado. Ele tem novos valores, mas permanece alinhado com todos os controles (UI) em qualquer momento.

    Melhor testabilidade

    O teste é bem direto com formulários reativos e requer menos configuração. Quando se trata de grandes aplicativos, isso é muito benéfico. Aqui, você obtém acesso síncrono a fluxos de entrada e a possibilidade de testar o formulário e os modelos de dados sem ter que renderizar a IU.

    Previsibilidade

    Os formulários reativos são construídos em torno de fluxos observáveis que rastreiam cada alteração única no formulário e permitem que você acesse valores de entrada de forma síncrona (graças ao fluxo de dados bem estruturado). O que, por sua vez, torna os formulários reativos altamente previsíveis.

    Fluxo de dados consistente e estruturado

    O fluxo de dados em formulários reativos Angular é bem estruturado porque a lógica do formulário é liderada pela classe do componente. Isso permite que você adicione funções de validação diretamente à instância FormControl na classe do componente. Sempre que ocorre uma alteração, Angular chama essas funções.

    What is angular form validation?

    A validação de formulário Angular é um processo técnico integral que verifica se qualquer entrada fornecida por um usuário em um formulário da web está correta e completa. Você pode gerenciar a validação em uma abordagem orientada a modelo ou com formulários reativos Angular. Com base no que é inserido, o formulário permitirá que os usuários prossigam ou exibirá uma mensagem de erro específica para ajudar o usuário a saber onde errou com sua entrada de dados.

    Dependendo de qual validador falhou, a mensagem de erro na tela fornece feedback, indicando o que está errado e o que exatamente precisa ser preenchido ou reinserido como dados. Em geral, os aplicativos usam formulários para permitir que os usuários realizem tarefas de entrada de dados, como inscrição, login, atualização de perfis online, envio de informações confidenciais e muito mais.

    Angular executa a validação de formulário toda vez que o valor de uma entrada de formulário é alterado e para confirmar se as entradas de dados preenchidas em um formulário da web por um usuário são precisas e completas. Para fazer isso corretamente, Angular chama uma lista de validadores que são executados em cada alteração que ocorre.

    A validação da entrada do usuário da UI pode ser feita com formulários orientados a modelos ou com formulários reativos Angular. Ambos os formulários são construídos nas seguintes classes base:

    • Controle de formulário
    • Grupo de formulários
    • Matriz de formulários
    • Acessador de Valor de Controle

    Validação de forma reativa Angular

    Os formulários reativos oferecem uma abordagem orientada a modelos para gerenciar entradas de formulários, cujos valores mudam com relação ao tempo. Como os formulários reativos são criados em uma classe de componente, a validação de formulários reativos do Angular acontece adicionando funções de validação diretamente ao modelo de controle de formulário na classe de componente.

    Quando o valor é válido, os validadores retornam null. Se o valor for inválido, os validadores geram um conjunto de erros, e você pode exibir uma mensagem de erro específica na tela.

    Existem validadores integrados, como required, minlength, maxlength etc. No entanto, você também pode criar seus próprios validadores.

    Um validador de formulário reativo personalizado simples pode ter esta aparência:

    import { Directive, OnInit } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
    selector: '[dateValueValidator]',
    providers: [{ provide: NG_VALIDATORS, useExisting: DateValueValidatorDirective, multi: true }]
})
export class DateValueValidatorDirective implements Validator {
    public validate(control: AbstractControl): ValidationErrors | null {
        if (!this.isDate(control.value)) {
            return { value: true };
        }

        return null;
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

    Um validador também pode ser assíncrono:

    import { Directive, OnInit } from '@angular/core';
import { AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';

@Directive({
    selector: '[dateValueAsyncValidator]',
    providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: DateValueAsyncValidatorDirective, multi: true }]
})
export class DateValueAsyncValidatorDirective implements AsyncValidator {
    public validate(control: AbstractControl): Observable<ValidationErrors | null> {
        if (!this.isDate(control.value)) {
            return of({ value: true });
        }

        return of(null);
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

    Angular Reactive form validation example

    Vamos ver como você pode configurar a validação de formulário reativa na prática com este exemplo de validação de formulário Angular.

    É uma demonstração rápida de um formulário de reserva bem padrão para um filme. Ele mostra o que acontece se uma ou várias entradas do formulário estiverem incompletas e você pode ver como a mensagem de erro específica é visualizada.

    Para os propósitos do nosso exemplo de validação de formulário reativo Angular, os campos que são obrigatórios incluem: filme, nome completo, e-mail e gênero. A menos que você preencha todos eles, você não poderá prosseguir com sua reserva e o book button permanecerá desabilitado.

    Então, se você inserir valores para título do filme, nome completo, telefone e e-mail, eles serão destacados em verde. Mas se você esquecer de selecionar favorite genre, este campo será destacado em vermelho, indicando entradas de valores incompletas. Uma vez que todos os valores estejam definidos corretamente, o campo será destacado em verde, indicando entradas de valores corretas. O book button será ativado e o formulário poderá ser enviado com sucesso depois.

    Angular form group validation

    Os grupos de formulários são basicamente um grupo de vários FormControlls relacionados que permitem que você acesse o estado dos controles encapsulados. Angular da validação de grupo ajuda você a rastrear o valor dos controles de grupo ou de um formulário, bem como a rastrear a validação do estado do controle de formulário. FormGroup é usado com FormControl.

    Why would you need Angular form custom validation?

    Com validadores personalizados, você pode abordar diferentes funcionalidades e garantir que os valores em um formulário atendam a certos critérios, o que às vezes não é possível fazer ao usar apenas validadores integrados. Se você quiser validar um número de telefone ou um padrão de senha específico, é melhor criar um validador personalizado e confiar na validação personalizada do formulário Angular.

    Com formulários reativos, gerar tais é tão fácil quanto escrever uma nova função. E para formulários orientados a modelos (como o formulário reativo em Angular), criamos funções de validação personalizadas e as enviamos para o construtor FormControl.

    Abaixo você pode ver como escrever e implementar um validador de formulário personalizado em seu formulário reativo.

    import { FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({/* ... */})
export class MyComponent implements OnInit {
    public form: FormGroup;

    public ngOnInit(): void {
        this.form = new FormGroup({
            datePicker: new FormControl('', [Validators.required, this.dateValidator(new Date())])
        });
    }

    private dateValidator(val: Date): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            if (this.isDate(control.value)
                || this.valGreaterThanDate(control.value, val)) {
                return { value: true };
            }

            return null;
        }
    }

    private valGreaterThanDate(value: Date, date: Date): boolean {
        const value1 = new Date(value).setHours(0, 0, 0, 0);
        const value2 = new Date(date).setHours(0, 0, 0, 0);
        return value.getTime() > date.getTime();
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.