Comment trouver les contrôles non valides dans angulaire 4 forme réactive

J'ai un réactif de forme 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
    }
}

.AddCustomerForm.valide retourne false, mais tout semble bon.

J'ai essayé de trouver avec la vérification de l'état de la propriété dans la collection de contrôles. Mais je me demande si il existe un moyen de trouver les invalides et d'un écran pour l'utilisateur?

De vous voulez juste pour afficher les champs avec une erreur, vous pouvez utiliser les css pour mettre en évidence ou de la couleur des champs non valides. Chaque champ non valide a un "ng-invalide" class ajouté dans sa liste de classe

OriginalL'auteur sa_ | 2017-07-20

  1. 53

    Vous pouvez simplement effectuer une itération sur chaque contrôle et de vérification de 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;
}
    merci pour cela, mais j'ai essayé et même cela renvoie rien que mon formulaire est toujours invalide, c'est bizarre. Je veux dire que ce code semble bon, mais il n'a pas de sens pourquoi la forme.valide retourne false
    ce n' findInvalidControls() retour vous?
    il ne retourne rien, non valide est vide. J'ai vérifié un par un dans le debug de regarder l'écran, toutes les commandes sont valides mais ce.AddCustomerForm.valide renvoie toujours false.
    Je pense que j'ai trouvé. il y a un champ e-mail et de l'expression régulière, mais en quelque sorte le contrôle de l'état est en ATTENTE et il pourrait être la cause
    si l'un des contrôles est une forme de groupe, votre fonction sera de retour le formulaire non valide du groupe et non pas la forme spécifique de contrôle qui n'est pas valide

    OriginalL'auteur Max Koretskyi aka Wizard

  2. 3

    Je viens de lutté contre ce problème: Chaque champ de formulaire est valide, mais encore la forme elle-même n'est pas valide.

    S'avère que j'avais mis 'Validateur.required " sur un FormArray où les contrôles sont ajoutés/supprimés de façon dynamique. Donc, même si la FormArray était vide, il était encore nécessaire et, par conséquent, la forme est toujours valide, même si chaque contrôle visible a été correctement rempli.

    Je n'ai pas trouvé la partie invalide de la forme, parce que mon " findInvalidControls fonction seulement vérifié FormControl et pas FormGroup/FormArray. J'ai donc 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;
  }

    OriginalL'auteur Jette

  3. 1

    À la fois les formes et de toutes vos commandes de prolonger l'angle de classe AbstractControl. Chaque application a un accesseur pour les erreurs de validation.

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

    L'api docs contient toutes les références
    https://angular.io/api/forms/AbstractControl

    Modifier

    Je pensais que l'erreur accesseur travaillé de cette façon, cependant, ce lien vers github montre qu'il y a d'autres personnes qui pensaient même que je n'ai
    https://github.com/angular/angular/issues/11530

    Dans tous les cas, en utilisant les commandes de l'accesseur vous pouvez itérer sur tous les formControls dans 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
     })
    cette méthode retourne null même il y a des vides contrôles
    Il doit retourner null quand il n'y a pas d'erreurs. Vous pouvez poster votre modèle?
    Oui, cela ne fonctionne pas, les différentes validations définies sur chaque formulaire de contrôles, ceux de chacun des contrôles de formulaire de contenir leurs erreurs, la forme ne l'est pas. Vous devez parcourir les contrôles comme Maximus ont donné la réponse.
    Je peux accéder à des erreurs pour chaque contorls comme ça.forme.les contrôles de['Email'].les erreurs
    en effet, la Forme elle-même peut montrer des erreurs si un programme de validation a été défini pour le formGroup ( vérifier les docs sur la croix de validation de champ, qui donne un sens à valider sur le groupe et non pas dans le contrôle )

    OriginalL'auteur LookForAngular

  4. 0

    Si vous n'êtes pas avoir autant de champs dans le formulaire, vous pouvez simplement la touche F12 et passez la souris sur le contrôle, vous serez en mesure de voir le pop-up avec le terrain naturel/touché/valeurs valides-
    "#nom de champ.formulaire de contrôle.ng-intacte.ng-invalide".

    OriginalL'auteur darshna mishra

  5. 0

    J'ai pris la liberté d'améliorer AngularInDepth.com-s code, afin qu'il effectue une recherche récursive dans pour non valides entrées dans des formulaires imbriqués aussi. Si il être imbriquées par FormArray-s ou FormGroup-s. Il suffit de saisir le haut niveau formGroup et il sera de retour tous les FormControls qui ne sont pas valides.

    Vous pouvez éventuellement écrémé certains de la "instanceof" les vérifications de type suite, si vous souhaitez séparer les FormControl de vérifier et de plus non valide éventail de fonctionnalités dans une fonction séparée. Cela rendrait la fonction look beaucoup plus propre, mais j'avais besoin d'un mondial, unique fonction, l'option pour obtenir un tableau plat toutes les invalides formControls 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, de sorte qu'ils n'ont pas de code d'eux-mêmes..

    Edit #1

    Il a été demandé qu'il renvoie également invalide FormArray-s et FormGroups, donc si vous avez besoin de cela aussi, l'utilisation de 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;
}
    Je l'ai essayé, mais il ne le trouve pas non valides FormGroup ou FormArray... seulement invalide FormControl. J'ai fait la même erreur... voir ma réponse.
    J'ai amélioré ma réponse, pour l'adapter à votre cas d'utilisation.

    OriginalL'auteur Karl Johan Vallner