Como encontrar os controles inválidos na forma reativa angular 4

Eu tenho uma forma reativa em Angular como abaixo:

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm.valid retorna falso, mas tudo parece bom.

Eu tentei descobrir com a verificação da propriedade de status na coleção de controles. Mas eu me pergunto se existe uma maneira de localizar os inválidos e exibi-los ao usuário?

Você pode simplesmente iterar em cada controle e verificar o status:

    public findInvalidControls() {
        const invalid = [];
        const controls = this.AddCustomerForm.controls;
        for (const name in controls) {
            if (controls[name].invalid) {
                invalid.push(name);
            }
        }
        return invalid;
    }

Acabei de lutar contra este problema: cada campo do formulário é válido, mas ainda assim o próprio formulário é inválido.

Acontece que eu tinha definido 'Validator.required' em um FormArray onde os controles são adicionados / removidos dinamicamente. Portanto, mesmo que o FormArray estivesse vazio, ele ainda era necessário e, portanto, o formulário sempre era inválido, mesmo se todos os controles visíveis fossem preenchidos corretamente.

Eu não encontrei a parte inválida do formulário, porque minha função 'findInvalidControls' verificou apenas FormControl's e não FormGroup / FormArray. Então eu atualizei um pouco:

/* 
   Returns an array of invalid control/group names, or a zero-length array if 
   no invalid controls/groups where found 
*/
public findInvalidControlsRecursive(formToInvestigate:FormGroup|FormArray):string[] {
    var invalidControls:string[] = [];
    let recursiveFunc = (form:FormGroup|FormArray) => {
      Object.keys(form.controls).forEach(field => { 
        const control = form.get(field);
        if (control.invalid) invalidControls.push(field);
        if (control instanceof FormGroup) {
          recursiveFunc(control);
        } else if (control instanceof FormArray) {
          recursiveFunc(control);
        }        
      });
    }
    recursiveFunc(formToInvestigate);
    return invalidControls;
  }

Um controle Angular inválido possui a classe CSS chamada 'ng-invalid' .

Em DevTools no Chrome, selecione a guia Console.

No prompt do console, digite o comando:

document.getElementsByClassName('ng-invalid')

A saída deve ser semelhante a esta:

Nesse caso, o texto sublinhado é para o controle do formulário listen-address. E o texto circulado: .ng-invalidindica que o controle é inválido.

Nota: Testado em cromo

Os formulários e todos os seus controles estendem a classe angular AbstractControl. Cada implementação possui um acessador para os erros de validação.

let errors = this.AddCustomerForm.errors
// errors is an instance of ValidatorErrors

A documentação da API contém todas as referências https://angular.io/api/forms/AbstractControl

Editar

Achei que o acessador de erro funcionasse dessa maneira, no entanto, este link para o github mostra que há algumas outras pessoas que pensaram o mesmo que eu https://github.com/angular/angular/issues/11530

Em qualquer caso, usando o acessador de controles, você pode iterar sobre todos os formControls em seu formulário.

Object.keys(this.AddCustomerForm.controls)
    .forEach( control => {
        //check each control here
        // if the child is a formGroup or a formArray
        // you may cast it and check it's subcontrols too
     })

Agora, no angular 9, você pode usar o método markAllAsTouched () para mostrar os validadores de controles inválidos:

this.AddCustomerForm.markAllAsTouched();

Se você não tiver muitos campos no formulário, pode simplesmente F12 e passar o mouse sobre o controle, você poderá ver o pop-up com os valores pristine / Touch / valid do campo- "# fieldname.form-control.ng- untouched.ng-invalid ".

Acho que você deve tentar usar this.form.updateValueAndValidity()ou tentar executar o mesmo método em cada um dos controles.

tente isso

 findInvalidControls(f: FormGroup) {
    const invalid = [];
    const controls = f.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
  }

Isso irá registrar todos os nomes dos controles 😊

for (let el in this.ReactiveForm.controls) {
      if (this.ReactiveForm.controls[el].errors) {
        console.log(el)
      }
 }          

você pode fazer uma matriz ou string com isso e exibir para o usuário

Tomei a liberdade de melhorar o código do AngularInDepth.com , de modo que ele também procure entradas inválidas em formulários aninhados de maneira recursiva. Seja aninhado por FormArray-s ou FormGroup-s. Basta inserir o formGroup de nível superior e ele retornará todos os FormControls que são inválidos.

Você pode possivelmente ignorar algumas das verificações do tipo "instanceof", se separar a verificação do FormControl e a adição à funcionalidade de array inválido em uma função separada. Isso faria com que a função parecesse muito mais limpa, mas eu precisava de uma opção de função única e global para obter um array simples de todos os formControls inválidos e esta é a solução!

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        switch( control.constructor.name )
        {
            case 'AbstractControl':
            case 'FormControl':
                if (control.invalid) _invalidControls.push( control );
                break;

            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

Apenas para aqueles que precisam, para que não tenham que codificar sozinhos.

Editar # 1

Foi solicitado que ele também retornasse FormArray-s e FormGroups inválidos, então se você também precisar disso, use este código

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        if (control.invalid) _invalidControls.push( control );
        switch( control.constructor.name )
        {    
            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

você pode registrar o valor do formulário console.log(this.addCustomerForm.value), ele consolará todos os valores do controle e os campos nulos ou "" (vazio) indicam controles inválidos

Se quiser verificar se o formulário é válido ou não e não quiser fazer nenhuma alteração no código, você pode tentar executar o seguinte comando no console da ferramenta de desenvolvedor do Chrome. Certifique-se de que seu aplicativo angular esteja exibindo o componente que hospeda o formulário em questão.

ng.probe(document.querySelector("app-your-component-selector-name")).componentInstance;

Não se esqueça de substituir o nome do seletor de componente no comando acima.

Este comando irá listar todas as variáveis ​​de seu componente, incluindo AddCustomerForm. Agora, se você expandir isso, verá uma lista de todos os seus controles. Você pode então expandir cada controle para verificar se ele é válido ou não.

Verifique o valor de controle de formulário vazio ou nulo na página html