web-dev-qa-db-fra.com

Comment utiliser formGroupName à l'intérieur des composants enfants

Comment utiliser formGroupName dans les composants enfants? par exemple:

j'ai ParentFormComponent

    parentForm: FormGroup;
    constructor(private fb: FormBuilder, private http: Http) { }
    ngOnInit() {


 this.parentForm = this.fb.group({
        _general: this.fb.group ({
           ProjectName:''
       })
  })
 }

En html:

  <form [formGroup]="parentForm" (ngSubmit)="submitForm()">
     <div formGroupName="_general">
        <mat-form-field>
             <input matInput placeholder="Project name" 
             formControlName="ProjectName">
        </mat-form-field>
    </div> 
  </form>

ça marche très bien mais quand je veux utiliser un composant enfant ça ne marche pas:

<form [formGroup]="parentForm" (ngSubmit)="submitForm()">
          <app-child [parentForm]='parentForm'></app-child>
      </form>

quand je l'insère dans le composant enfant:

<div formGroupName="_general">
            <mat-form-field>
                 <input matInput placeholder="Project name" 
                 formControlName="ProjectName">
            </mat-form-field>
        </div>

et dans le fichier ts

 @Input() parentForm:FormGroup;

je reçois une erreur: formGroupName doit être utilisé avec une directive formGroup parent. Vous souhaiterez ajouter une directive formGroup et lui transmettre une instance FormGroup existante (vous pouvez en créer une dans votre classe).

angularangular6angular-reactive-forms
7
Livnat Menashe

Au lieu d'utiliser la liaison de propriété d'entrée, utilisez FormGroupDirective

FormGroupDirective

Cette directive accepte une instance FormGroup existante. Il utilisera ensuite cette instance FormGroup pour faire correspondre toutes les instances enfant FormControl, FormGroup et FormArray aux directives enfant FormControlName, FormGroupName et FormArrayName.

Utilisez Viewproviders pour fournir controlContainer, Inject FormGroupDirective dans votre composant enfant pour obtenir l'instance parentform

app.parent.html 

<form [formGroup]="parentForm">
  <app-child></app-child>
</form>

child.component.ts 

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ControlContainer, FormGroupDirective, Validators, FormBuilder, NgModel } from '@angular/forms';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ChildComponent implements OnInit {
  childForm;
  constructor(private parentF: FormGroupDirective) { }

  ngOnInit() {

    this.childForm = this.parentF.form;
    this.childForm.addControl('_general', new FormGroup({
      ProjectName: new FormControl('')
    }))

  }
}

child.component.html 

<div formGroupName="_general">
     <mat-form-field>
                 <input matInput placeholder="Project name" 
                 formControlName="ProjectName"> 
      <mat-form-field>  
 </div>

Exemple: https://stackblitz.com/edit/angular-ezqupz

11
Chellappan