Comment trouver les contrôles invalides sous forme réactive angulaire 4

J'ai une forme réactive en angulaire comme ci-dessous:

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 renvoie false, mais tout semble bon.

J'ai essayé de trouver en vérifiant la propriété status dans la collection de contrôles. Mais je me demande s'il existe un moyen de trouver les invalides et de les afficher à l'utilisateur?

Vous pouvez simplement parcourir chaque contrôle et vérifier l'état:

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

Je viens de lutter contre ce problème: chaque champ de formulaire est valide, mais le formulaire lui-même n'est toujours pas valide.

Il s'avère que j'avais défini «Validator.required» sur un FormArray où les contrôles sont ajoutés / supprimés dynamiquement. Ainsi, même si le FormArray était vide, il était toujours nécessaire et le formulaire était donc toujours invalide, même si chaque contrôle visible était correctement rempli.

Je n'ai pas trouvé la partie invalide du formulaire, car ma fonction 'findInvalidControls' ne vérifiait que FormControl et non FormGroup / FormArray. Alors je l'ai mis à jour un peu:

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

Sous DevTools dans Chrome, sélectionnez l'onglet Console.

Dans la commande de type d'invite de console:

document.getElementsByClassName('ng-invalid')

La sortie doit être similaire à ceci:

Dans ce cas, le texte souligné est pour le contrôle de formulaire listen-address. Et le texte encerclé: .ng-invalidindique que le contrôle est invalide.

Remarque: testé en chrome

Les formulaires et tous vos contrôles étendent la classe angulaire AbstractControl. Chaque implémentation a un accesseur aux erreurs de validation.

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

La documentation de l'API contient toutes les références https://angular.io/api/forms/AbstractControl

Éditer

Je pensais que l'accesseur d'erreur fonctionnait de cette façon, mais ce lien vers github montre qu'il y a d'autres personnes qui pensaient la même chose que moi https://github.com/angular/angular/issues/11530

Dans tous les cas, en utilisant l'accesseur de contrôles, vous pouvez parcourir tous les formControls de votre formulaire.

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

Maintenant, dans angular 9, vous pouvez utiliser la méthode markAllAsTouched () pour afficher les validateurs de contrôles non valides:

this.AddCustomerForm.markAllAsTouched();

Si vous n'avez pas beaucoup de champs dans le formulaire, vous pouvez simplement F12 et survoler le contrôle, vous pourrez voir le pop-up avec les valeurs vierges / touchées / valides du champ- "# fieldname.form-control.ng- untouched.ng-invalid ".

Je pense que vous devriez essayer d'utiliser this.form.updateValueAndValidity()ou essayer d'exécuter cette même méthode dans chacun des contrôles.

essaye ça

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

Cela enregistrera tous les noms des contrôles 😊

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

vous pouvez en faire un tableau ou une chaîne et afficher à l'utilisateur

J'ai pris la liberté d'améliorer le code AngularInDepth.com -s, afin qu'il recherche de manière récursive les entrées non valides dans les formes imbriquées également. Qu'il soit imbriqué par FormArray-s ou FormGroup-s. Entrez simplement le formGroup de niveau supérieur et il renverra tous les FormControls qui ne sont pas valides.

Vous pouvez éventuellement parcourir certains des contrôles de type "instanceof", si vous séparez le contrôle FormControl et l'ajout de fonctionnalités de tableau non valides dans une fonction distincte. Cela rendrait la fonction beaucoup plus propre, mais j'avais besoin d'une option globale et unique pour obtenir un tableau plat de tous les formControls invalides et c'est la solution!

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

Juste pour ceux qui en ont besoin, afin qu'ils n'aient pas à le coder eux-mêmes.

Modifier # 1

Il a été demandé qu'il renvoie également FormArray-s et FormGroups invalides, donc si vous en avez également besoin, utilisez ce code

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

vous pouvez enregistrer la valeur du formulaire console.log(this.addCustomerForm.value), cela consolidera la valeur de tous les contrôles, puis les champs null ou "" (vides) indiquent les contrôles non valides