Mehrfache Kindkomponente innerhalb des Formulars - Angular 2

Question

Ich arbeite an großer Form, also plane ich, das Formular in mehrfache Kindkomponenten zu kürzen, die für einfache Integration und maitainbility helfen. Mit Form Builder versuche ich dies zu implementieren.

mainform.html

<form novalidate (ngSubmit)="onSubmit(formDetail);" [formGroup]="formDetail"> 
     <label> 
     <span>Name</span> 
      <input 
      type="text" 
      placeholder="Enter emp name" 
      formControlName="name"> 
     </label> 
     <app-userinfo></app-userinfo> <!-- Child component 1 --> 
     <app-useracc></app-useracc> <!-- Child component 2 --> 
    </form> 

mainform.ts

export class MainformComponent implements OnInit { 
    formDetail: FormGroup; 
    constructor(private formBuilder: FormBuilder) { } 

    ngOnInit() { 
     this.formDetail= this.formBuilder.group({ 
     name:'', 
     userinfo: this.formBuilder.group({ 
     userid: '', 
     userph: '' 
     }), 
     useracc: this.formBuilder.group({ 
     useracc: '', 
     usertransfer: '' 
     }) 
    }); 
    } 
    onSubmit(value:User){ 
    debugger; 
    } 
} 

console.log

formControlName must be used with a parent formGroup directive. You'll want to add a formGroup 

Ist es mögl Verschachtelte Form als separates Kind?

Answer 1

Sie müssen Input() verwenden und diese unter FormGroup an das Kind übergeben. Habe ich es ein bisschen hier und machte die Gruppe useraccount statt useracc benannt, um die Kontrolle aus der Gruppe zu trennen:

Ihre Untergruppe für Benutzer-Account in Ihren Eltern:

... 
    useraccount: this.formBuilder.group({ 
    useracc: '', 
    }) 
    ... 

also das zugehörige Kind Komponententag in der Mutter soll wie folgt aussehen:

<app-useracc [useraccount]="formDetail.controls.useraccount"></app-useracc> 

und geben Sie dann in Ihrem Kind Komponente hinzufügen:

und Vorlage könnte wie folgt aussehen:

<div [formGroup]="useraccount"> 
    <input formControlName="useracc"> 
</div> 

Arbeiten sample