Angular 4-错误:formControlName必须与父formGroup指令一起使用
我正在使用组件-
engine-add-contact-form.html
<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
<md-tab label="Form">
<ang-form></ang-form>
</md-tab>
<md-tab label="Email">
<ang-email></ang-email>
</md-tab>
<md-tab label="Message">
<ang-message></ang-message>
</md-tab>
</md-tab-group>
<button md-raised-button type="submit">Publish</button>
ang-form.html
<div class="form-grid form-title">
<md-input-container>
<input formControlName="contact_form_title"
class="form-title-field" mdInput placeholder="Title" value="">
</md-input-container>
</div>
使用与我添加其他组件(ang-email ang-message
)html相同的方法.
Using same way i added other components (ang-email ang-message
) html.
我在engine-add-form.ts
export class EngineAddFormComponent{
contact_form: any;
form_value: any;
constructor(){
this.contact_form = new FormGroup({
contact_form_title: new FormControl('', Validators.minLength(2)),
........
........
});
}
onSubmit(){
this.form_value = JSON.stringify(this.contact_form.value);
console.log(this.form_value);
}
}
我收到以下错误-
错误:formControlName必须与父formGroup指令一起使用. 您将要添加一个formGroup 指令并将其传递给现有的FormGroup实例(您可以在您的类中创建一个实例).
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
我不明白我的代码出了什么问题.
I can't understand what is wrong with my code.
您需要将formGroup(在您的情况下为 contact_form )传递给 ang-form 的子组件
You need to pass formGroup (in your case contact_form) to child component which is ang-form
engine-add-contact-form.html(已修改)
engine-add-contact-form.html(modified)
<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
<md-tab label="Form">
<ang-form [group]="contact_form"></ang-form>
</md-tab>
<md-tab label="Email">
<ang-email></ang-email>``
</md-tab>
<md-tab label="Message">
<ang-message></ang-message>
</md-tab>
</md-tab-group>
<button md-raised-button type="submit">Publish</button>
ang-form.html(已修改)
ang-form.html(modified)
<div class="form-grid form-title" [formGroup]="group">
<md-input-container>
<input formControlName="contact_form_title"
class="form-title-field" mdInput placeholder="Title" value="">
</md-input-container>
</div>
在ang-form.component.ts中添加 @Input()组:FormGroup;