Division d'un formulaire en plusieurs composants avec validation

Question

Je veux créer un seul grand formulaire avec angular 2. Mais je veux créer ce formulaire avec plusieurs composants comme le montre l'exemple suivant.

Composant de l'application

<form novalidate #form1="ngForm" [formGroup]="myForm">
<div>
    <address></address>
</div>
<div>
    <input type="text" ngModel required/>
</div>

<input type="submit" [disabled]="!form1.form.valid" > </form>

Composant de l'adresse

<div>
<input type="text" ngModel required/> </div>

Lorsque j'utilise le code ci-dessus, il est visible dans le navigateur comme je le souhaitais, mais le bouton d'envoi n'est pas désactivé lorsque je supprime le texte dans le composant d'adresse.
Mais le bouton a été désactivé correctement lorsque j'ai supprimé le texte dans la zone de saisie du composant d'application.

Answer 1

J'utiliserais un formulaire réactif qui fonctionne très bien, et pour ce qui est de votre commentaire :

Existe-t-il un autre exemple simple pour celui-ci ? Peut-être le même exemple sans les boucles

Je peux vous donner un exemple. Tout ce que vous avez à faire, c'est d'imbriquer un FormGroup et le transmettre à l'enfant.

Disons que votre formulaire ressemble à ceci, et vous voulez passer address formgroup à l'enfant :

ngOnInit() {
  this.myForm = this.fb.group({
    name: [''],
    address: this.fb.group({ // create nested formgroup to pass to child
      street: [''],
      zip: ['']
    })
  })
}

Ensuite, dans votre parent, il suffit de passer le groupe de formulaires imbriqués :

<address [address]="myForm.get('address')"></address>

Dans votre enfant, utilisez @Input pour le groupe de formulaires imbriqués :

@Input() address: FormGroup;

Et dans votre modèle, utilisez [formGroup] :

<div [formGroup]="address">
  <input formControlName="street">
  <input formControlName="zip">
</div>

Si vous ne voulez pas créer un groupe de formulaires imbriqués, vous n'avez pas besoin de le faire, vous pouvez simplement passer le formulaire parent à l'enfant, donc si votre formulaire ressemble à :

this.myForm = this.fb.group({
  name: [''],
  street: [''],
  zip: ['']
})

vous pouvez passer les contrôles que vous voulez. En utilisant le même exemple que ci-dessus, nous voudrions seulement afficher street et zip le composant enfant reste le même, mais la balise enfant dans le modèle ressemblerait alors à ceci :

<address [address]="myForm"></address>

Voici un

Démo de la première option, voici la seconde Démo

Plus d'informations ici à propos des formulaires imbriqués basés sur des modèles.

Answer 2

Il existe également un moyen de le faire dans les formulaires pilotés par des modèles. ngModel crée automatiquement un formulaire distinct sur chaque composant, mais vous pouvez injecter le formulaire du composant parent en ajoutant ceci à votre composant :

@Component({
viewProviders: [{ provide: ControlContainer, useExisting: NgForm}]
}) export class ChildComponent

Vous devez cependant vous assurer que chaque entrée a un nom unique. Ainsi, si vous utilisez *ngFor pour appeler votre composant enfant, vous devez mettre l'index (ou tout autre identifiant unique) dans le nom, par exemple :

[name]="'address_' + i"

Si vous souhaitez structurer votre formulaire en FormGroups, vous utilisez les fonctions ngModelGroup et

viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]

au lieu de ngForm et ajoutez [ngModelGroup]="yourNameHere" à certains de vos composants enfants contenant des balises html.

Answer 3

D'après mon expérience, ce type de composition de champs de formulaire est difficile à réaliser avec des formulaires pilotés par des modèles. Les champs intégrés dans votre composant d'adresse ne sont pas enregistrés dans le formulaire (objet NgForm.controls), ils ne sont donc pas pris en compte lors de la validation du formulaire.

• Vous pouvez créer un composant ControlValueAccessor (qui accepte l'attribut ngModel) avec toutes les validations, mais il est alors difficile d'afficher les erreurs de validation et de propager les changements (l'adresse est considérée comme un champ de formulaire unique avec une valeur complexe).
• Vous pourriez probablement passer la référence du formulaire dans le composant Adresse et y enregistrer vos contrôles internes, mais je n'ai pas essayé et cela semble être une approche étrange (je ne l'ai vue nulle part).
• Vous pouvez passer à des formulaires réactifs (au lieu d'être pilotés par des modèles), passer un objet de groupe de formulaires (représentant une adresse) dans le composant Adresse, en conservant la validation dans votre définition de formulaire. Vous pouvez voir un exemple ici https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Answer 4

J'aimerais vous faire part d'une approche qui a fait l'affaire dans mon cas. J'ai créé la directive suivante :

import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Directive({
  selector: '[appUseParentForm]',
  providers: [
    {
      provide: ControlContainer,
      useFactory: function (form: NgForm) {
        return form;
      },
      deps: [NgForm]
    }
  ]
})
export class UseParentFormDirective {
}

Maintenant, si vous utilisez cette directive sur un composant enfant, par exemple :

<address app-use-parent-form></address>

Les contrôles de AddressComponent seront ajoutés au formulaire 1. Par conséquent, la validité du formulaire dépendra également de l'état des contrôles du composant enfant.

Vérifié uniquement avec Angular 6