Início / coding / Perguntas / 79566103
Accepted
Rob Mousley
Asked: 2025-04-10 16:22:22 +0800 CST

Problema ao ativar validadores no formulário reativo Angular em tempo de execução - usando form.updateValueAndValidity()

  • 772

Tenho um problema simples, porém complexo. Tenho um formulário reativo e quero definir a validação programaticamente.

    this.boatForm.get('boatType').setValidators(Validators.required);
    this.boatForm.updateValueAndValidity();

    this.boatForm.get('boatType').updateValueAndValidity();
    this.#logger.debug(
        '/n', 'value:', this.boatForm.get('boatType').value,
        '/n', 'valid:', this.boatForm.get('boatType').valid
    )

O valor do controle boatType é nulo. Portanto, espero que o log mostre:

valor: válido: falso

E... acontece mesmo.

Mas eu tenho vários controles naquele formulário, então, em vez de aplicar updateValueAndValidity() a cada controle individualmente, quero executar:

    this.boatForm.get('boatType').setValidators(Validators.required);
    // Set other validators on other controls on the same form
    this.boatForm.updateValueAndValidity();

    this.#logger.debug(
        '\n', 'value', this.boatForm.get('boatType').value,
        '\n', 'valid', this.boatForm.get('boatType').valid
    )

Mas agora eu entendo:

valor: válido: verdadeiro

A solução alternativa que implementamos é chamar um método:

static updateFormControlValidators(form: FormGroup): void {
    // Iterate over each control in the form group

    Object.keys(form.controls).forEach(controlName => {
        const control = form.get(controlName);

        // Call updateValueAndValidity to re-evaluate the validity of each control
        if (control) {
            control.updateValueAndValidity();
        }
    });
}

Mas a questão é:

form.updateValueAndValidity() deve realizar a mesma coisa?

angular

1 respostas

  1. Best Answer

    Os documentos mencionam:

    updateValueAndValidity:

    Recalcula o valor e o status de validação do controle. Por padrão, também atualiza o valor e a validade de seus ancestrais.

    Para dar mais suporte a isso, a documentação AbstractControlmenciona a execução do controle updateValueAndValiditye não do formulário raiz.

    AbstractControl - Documentação (addValidators)

    Define os validadores síncronos ativos neste controle. Chamar isso substitui quaisquer validadores síncronos existentes.
    Ao adicionar ou remover um validador em tempo de execução, você deve chamar updateValueAndValidity() para que a nova validação entre em vigor.
    Se quiser adicionar um novo validador sem afetar os existentes, considere usar o método addValidators().

    Então, quando você atualiza o formulário usando updateValueAndValidity, o formulário é o ancestral raiz, portanto o controle filho não é atualizado.

    this.boatForm.updateValueAndValidity();

    Quando atualizamos o controle usando updateValueAndValidity, o controle recebe a requiredvalidação aplicada e o formulário raiz também tem seu recalculation of the value and validation status.

    this.boatForm.get('boatType')!.updateValueAndValidity();

    Conclusão:

    Portanto, a execução do formulário updateValueAndValidityatualizará os validadores do formulário raiz e não dos filhos.

    Referência Stackblitz

    • 1

relate perguntas