![](/img/trans.png)
[英]ERROR Error: formControlName must be used with a parent formGroup directive
[英]Angular 4 - Error: formControlName must be used with a parent formGroup directive
我正在使用组件添加form
输入字段 -
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。
我在engine-add-form.ts
添加了[formGroup]
指令
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 实例(您可以在类中创建一个)。
我不明白我的代码有什么问题。
您需要将 formGroup (在您的情况下为contact_form )传递给ang-form 的子组件
engine-add-contact-form.html(修改)
<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(修改)
<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>
添加@Input() 组:FormGroup; 在你的 ang-form.component.ts
这样做有很多选择。
1) 这是一个使用 formControl 指令和 angular DI 系统的示例:
@Component({
selector: 'ang-form',
template: `
<input [formControl]="control">
`
})
export class AngForm {
control: FormControl;
constructor(private formGroupDir: FormGroupDirective) {}
ngOnInit() {
this.control = this.formGroupDir.control.get('contact_form_title') as FormControl;
}
}
2) 在子组件上定义 ControlContainer 视图提供程序的另一种方式:
@Component({
selector: 'ang-form',
template: `
<input formControlName="contact_form_title">
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class AngForm { }
有关更多示例,请参见:
将输入包装在一个 div 中并将 formGroup 传递到 div 中:
<div [formGroup]="formGroup">
<input ...>
</div>
<form [formGroup]="guestForm" novalidate>
<div class="panel-body">
<form> -> Remove this
<div class="col-md-12 col-sm-12">
<div class="form-group col-md-3 col-sm-6">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
</div>
</form> -> Remove this
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.