Angulaire 2: Itération sur le réactif de contrôles de formulaire

Je voudrais markAsDirty tous les contrôles à l'intérieur d'un FormGroup.

InformationsquelleAutor Marcos J.C Kichel | 2017-02-14
  1. 146

    Découvert que Object.keys pouvez gérer cela..

        Object.keys(this.form.controls).forEach(key => {
      this.form.get(key).markAsDirty();
    });

    Angulaire 8+, utilisez la commande suivante (basée sur michel-ange réponse):

        Object.keys(this.form.controls).forEach(key => {
      this.form.controls[key].markAsDirty();
    });
    • Lorsque j'utilise cette fonction dans le onSubmit, je reçois l'erreur Cannot invoke an expression whose type lacks a call signature. Type 'AbstractControl' has no compatible call signatures. personne Ne sait pourquoi?
    • Objet.clés( ce.registerForm.les contrôles).forEach(clé => { cette.registerForm.les témoins[key].markAsDirty(); });
    • Lorsque j'essaie de l'Objet.touches, ou même le "dans", je ne reçois rien. Pourtant, si j'ai de la console.journal(le formulaire.contrôles) je peux VOIR tous les différents contrôles de formulaire figurant à l'objet. Je suis perplexe.
    • À l'aide Angulaire 5, le markAsDirty() / markAsTouched() ne fonctionne pas de manière récursive dans les sous-FormGroups. Je me suis cassé le code ci-dessus dans une fonction récursive et l'appel sur n'importe quel sous-FormGroups. Fonctionne mieux w/ actuel Angulaire du Matériel de l'INTERFACE dans le cas où un utilisateur ne touche jamais un élément nécessaire, je l'appelle lorsque l'utilisateur tente d'envoyer le formulaire de marquer n'importe quel point sur la situation.
    • Merci de ton frère. votre solution fonctionne.
    • Thnx pour la lecture de mon post et de mettre à jour votre propre réponse. Officiel docs sont également dépassées j'ai donc dû le comprendre par l'impression à chaque ligne...
    • Oh, vous êtes tout à fait bienvenue, je vous remercie pour votre contribution à cette question.

    InformationsquelleAutor Marcos J.C Kichel
  2. 41

    Pour ce que ça vaut, il y a une autre façon de le faire sans avoir à utiliser Objet.les touches(...) magie:

    for (const field in this.form.controls) { //'field' is a string

   const control = this.form.get(field); //'control' is a FormControl

}
    • De quoi parles-tu? De toute évidence, cela EST de la magie
    • comment faire pour obtenir l'indice de la boucle?
    • Pour ceux qui utilisent TSLint, le code fonctionne, mais TSLint se plaint avec "pour (... à ...) les déclarations doivent être filtrées avec une instruction if (forin)".
    • tslint pointe, une citation du JavaScript documentation de la...dans l'énoncé stackoverflow.com/questions/40770425/...
    InformationsquelleAutor Liviu Ilea
  3. 32

    Accepté la réponse est correcte pour une plate forme de structure, mais ne permet pas de répondre entièrement à la question d'origine. Une page web peut exiger imbriquée FormGroups et FormArrays, et nous devons tenir compte de cela pour créer une solution robuste.

    public markControlsDirty(group: FormGroup | FormArray): void {
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.controls[key];

        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.markControlsDirty(abstractControl);
        } else {
            abstractControl.markAsDirty();
        }
    });
}
    InformationsquelleAutor Keenan Diggs
  4. 5

    JS:

        Object.keys( this.registerForm.controls).forEach(key => {
       this.registerForm.controls[key].markAsDirty();
    });

    InformationsquelleAutor Foad
  5. 5

    À l'aide de @Marcos réponse, j'ai créé une fonction qui peut être appelée le passage d'un formGroup comme paramètre, et c'est la marque de chaque formGroup enfants contrôles sale, juste pour le rendre utilisable à partir de plusieurs endroits dans le code de la mettre à l'intérieur d'un service, par exemple.

    public touchAllFormFields(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach((key) => {
        formGroup.get(key).markAsDirty();
    });
}

    j'espère que ça aide 😉

    • Parfait! Ajouté à service, le long w/fonctions similaires à clearValidators, untouched), etc. Peut vouloir ajouter récursive vérifier les contrôles imbriqués, mais cela fonctionne pour l'instant. Merci!
    InformationsquelleAutor Hugo
  6. 4

    Semble que get de fonction ne fonctionnent plus pour la récupération des valeurs spécifiques dans votre forme Angulaire 8. Donc, c'est comment je l'ai résolu, et puisque les réponses sont un peu vieux, je pense que cela pourrait aider plus d'utilisateurs. Basé sur la réponse de @Liviu Ilea

    for (const field in this.myForm.controls) { //'field' is a string
  console.log(this.myForm.controls[field].value);
}
    • Êtes-vous sûr? Doc API a la méthode get déjà des résumés de Contrôle (angulaire.io/api/formes/AbstractControl#get). Je n'ai pas migrer encore. Maintenant j'ai peur (⊙_◎)
    • Ouais, j'ai vu que quand j'ai été la réécriture, mais même lors de l'impression de toutes les lignes dans la console je ne pouvais pas trouver tout obtenir de la méthode sur l'objet. Je pense que la documentation est derrière. Bonne chance migration!
    InformationsquelleAutor Michelangelo
  7. 1

    J'ai créer cette fonction pour la rendre*
    J'ai un contrôle avec le nom "ordre", et de passer de l'indice de lui.

    {"conditionGroups": [
   {
     "order": null,
     "conditions": []
   }
  ]
}


updateFormData() {
    const control = <FormArray>this.form.controls['conditionGroups'];  
    control.value.map((x,index)=>{
    x.order = index; 
 })
    InformationsquelleAutor João Marcos Santos Teixeira
  8. 1

    C'est que de travailler pour moi 

      private markFormGroupTouched(formGroup: FormGroup) {
      Object.keys(formGroup.controls).forEach((key) => {
      const control = formGroup.controls[key];
      control.markAsDirty();
      if ((control instanceof FormGroup)) {
        this.markFormGroupTouched(control);
      }
 });

    }

    InformationsquelleAutor omyfish