如何在子组件中使用formGroupName

Question

如何在子组件中使用formGroupName？例如：

我有ParentFormComponent

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

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

在html:中

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

它工作得很好，但当我想使用子组件时，它不起作用：

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

当我将其插入子组件时：

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

并且在ts文件中

@Input() parentForm:FormGroup;

我遇到错误：formGroupName必须与父formGroup指令一起使用。您将要添加一个表单组指令，并将一个现有的FormGroup实例传递给它(您可以在类中创建一个(。

Answer 1

不使用输入属性绑定而使用FormGroupDirective

FormGroupDirective

此指令接受现有的FormGroup实例。那就好了使用此FormGroup实例匹配任何子FormControl、FormGroup、，和FormArray实例到子FormControlName、FormGroupName和FormArrayName指令。

使用Viewproviders提供controlContainer，在子组件中注入FormGroupDirective以获取parentform实例

app.eparent.html

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

子组件.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>

示例：https://stackblitz.com/edit/angular-ezqupz

Answer 2

您甚至不需要将formGroup传递给子组件，只需提供一个ControlContainer并使用formGroupName，如下所示：

父html:

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

父ts:

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

child-html:

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

子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 {
constructor() { }
ngOnInit() {
}
}

这样，您的整个表单配置都在父组件中，而不将其拆分为子组件。ts，它们仅充当视图。