Angular 6 Modèle de validation du formulaire FormGroup imbriqué

Question

Ma structure de groupe de formulaire ressemble à ceci (order.component.ts):

this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});

Dans le modèle (order.component.html) j'ai:

    Informations du client
    Nom complet:

    Nom invalide

  ...

Cela fonctionne, mais y a-t-il un moyen plus court d'exprimer orderForm.controls['customer'].controls['name']? Par exemple, il serait plus succinct que la condition *ngIf soit "name.invalid && (name.dirty || name.touched)"

Answer 1

Oui, c'est la bonne façon de récupérer le contrôle de formulaire imbriqué et il n'y a pas de raccourci.

ou vous pourriez créer une propriété dans votre composant qui pointe vers l'objet formulaire orderForm.get('customer')

private customerForm : FormGroup

Et l'assigner après l'initialisation du formulaire

this.customerForm = this.orderForm.get('customer')

et le récupérer comme {{customerForm.get('name').valid}}

Answer 2

J'ai rencontré le même problème. Mon problème principal était que ng build --prod échoue lors de l'utilisation de orderForm.controls['customer'].controls['name'] avec l'erreur :

La propriété 'controls' n'existe pas sur le type 'AbstractControl'.

Apparemment, il s'agit simplement d'un problème de type lors de la compilation du modèle en TS.

Ma solution est de créer un getter pour le groupe de formulaire imbriqué et de caster le type correct, ce qui résout à la fois mon problème et le vôtre :

get customer() {
  return this.orderForm.controls.customer as FormGroup;
}

utilisé dans le HTML :

Nom invalide