Angular 2: Valider les champs de formulaire du composant enfant à partir du composant parent

Question

Énoncé du problème:

Composant parent ayant <form> tag et quelques <input> balises à l'intérieur, et le composant enfant a également quelques <input> tags, le composant parent en a un <submit> et nous validons les champs du formulaire en soumettant le formulaire.

Comment valider le composant enfant <input> champs du composant parent sur submit la fiche?

Exigence:

Si un composant parent a une fiche contenant des composants enfants avec des composants input dans leur modèle, ces composants input doivent être validés au clic s'ils sont soumis à partir du composant parent.

Constatations:

Il y a beaucoup de messages dans SO ayant la même déclaration de problème mais n'a trouvé aucune solution appropriée. Tous les messages ci-dessous valident le formulaire entier mais mon exigence est de valider chaque champ du composant enfant.

• validation Angular 2 avec le composant enfant
• Autoriser les entrées de formulaire basées sur un modèle dans une hiérarchie de composants à s'inscrire avec un seul formulaire parent
• Comment vérifier la validité de la forme du composant enfant dans le composant parent dans Angular 4

Answer 1

Nous pouvons y parvenir en utilisant template driven technique également. Trouvez ci-dessous les étapes :

• Du composant parent au composant enfant, nous devons passer l'événement de bouton d'envoi.

  <button type="button" (click)="enterForm(parentForm)">Submit</button>
  

  Ici, parentForm est la référence du formulaire.

• appeler la méthode du composant enfant à l'aide du décorateur @ViewChild du parent pour passer submit button event au clic de soumettre.

  @ViewChild('validateChildComponentForm') private ChildComponent: ChildComponent;
  

• Passez la référence du formulaire enfant à l'aide du décorateur @ViewChild dans le composant enfant.

  @ViewChild('smartyStreetForm') form;
  
  enterForm(parentForm) {
      this.submitted = true;
      this.ChildComponent.validateChildForm(this.submitted);
      if(!parentForm.valid || !this.childFormValidCheck) {
          return;
      } else {
         // success code comes here.
      }                
  }
  

• Maintenant, dans la méthode du composant enfant, nous vérifierons que si le formulaire parent est soumis et que le formulaire du composant enfant est valide, émettez true sinon false dans le composant parent. nous utiliserons @Output décorator pour émettre la valeur isChildFormValid dans le composant parent.

  @Output() isChildFormValid: EventEmitter<any> = new EventEmitter<any>();
  
  public validateChildForm(data: any) {
      if (data === true) {
          if(this.form.valid === true) {
              this.isChildFormValid.emit(true);
          } else {
              this.isChildFormValid.emit(false);
          }
      }
  } 
  

• Maintenant, dans le composant parent, nous obtiendrons la valeur isChildFormValid.

  private isChildFormValid(formValid: any) {
      this.childFormValidCheck = formValid;
  }
  

Représentation picturale: