Cómo encontrar los controles no válidos en forma reactiva angular 4

Tengo una forma reactiva en Angular como a continuación:

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 devuelve falso, pero todo se ve bien.

Intenté encontrar comprobando la propiedad de estado en la colección de controles. Pero me pregunto si hay alguna manera de encontrar los inválidos y mostrarlos al usuario.

Simplemente puede iterar sobre cada control y verificar el estado:

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

Acabo de luchar contra este problema: todos los campos de formulario son válidos, pero el formulario en sí no es válido.

Resulta que había configurado 'Validator.required' en un FormArray donde los controles se agregan / eliminan dinámicamente. Entonces, incluso si FormArray estaba vacío, todavía era necesario y, por lo tanto, el formulario siempre era inválido, incluso si todos los controles visibles se completaron correctamente.

No encontré la parte inválida del formulario, porque mi función 'findInvalidControls' solo verificó FormControl y no FormGroup / FormArray. Así que lo actualicé un poco:

/* 
   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;
  }

En DevTools en Chrome, seleccione la pestaña Consola.

En el indicador de la consola, escriba el comando:

document.getElementsByClassName('ng-invalid')

La salida debería ser similar a esta:

En este caso, el texto subrayado es para el control de formulario listen-address. Y el texto encerrado: .ng-invalidindica que el control no es válido.

Nota: probado en cromo

Tanto las formas como todos sus controles extienden la clase angular AbstractControl. Cada implementación tiene un acceso a los errores de validación.

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

Los documentos api contienen todas las referencias https://angular.io/api/forms/AbstractControl

Editar

Pensé que el acceso al error funcionaba de esta manera, sin embargo, este enlace a github muestra que hay otras personas que pensaron lo mismo que yo https://github.com/angular/angular/issues/11530

En cualquier caso, al usar el descriptor de acceso de controles, puede iterar sobre todos los controles de formulario en su formulario.

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
     })

Ahora, en angular 9, puede usar el método markAllAsTouched () para mostrar los validadores de controles no válidos:

this.AddCustomerForm.markAllAsTouched();

Si no tiene muchos campos en el formulario, simplemente puede F12 y pasar el cursor sobre el control, podrá ver la ventana emergente con los valores prístinos / tocados / válidos del campo- "# fieldname.form-control.ng- untouched.ng-invalid ".

Creo que deberías intentar usar this.form.updateValueAndValidity()o intentar ejecutar ese mismo método en cada uno de los controles.

prueba esto

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

Esto registrará todos los nombres de los controles 😊

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

puede hacer una matriz o cadena de esto y mostrar al usuario

Me tomé la libertad de mejorar el código -s de AngularInDepth.com , para que también busque de forma recursiva entradas no válidas en formularios anidados. Ya sea que esté anidado por FormArray-s o FormGroup-s. Simplemente ingrese el formGroup de nivel superior y devolverá todos los FormControls que no son válidos.

Es posible que pueda eliminar algunas de las comprobaciones de tipo "instancia de", si separa la comprobación de FormControl y la adición a la funcionalidad de matriz no válida en una función separada. Esto haría que la función se vea mucho más limpia, pero necesitaba una opción global de función única para obtener una matriz plana de todos los controles de formulario no válidos y esta es la solución.

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;
}

Solo para aquellos que lo necesitan, para que no tengan que codificarlo ellos mismos.

Editar # 1

Se solicitó que también devuelva FormArray-s y FormGroups no válidos, por lo que si también lo necesita, 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;
}

puede registrar el valor del formulario console.log(this.addCustomerForm.value), consolará el valor de todos los controles, luego los campos nulos o "" (vacíos) indican controles no válidos