我正在使用组件
添加form
输入字段
发动机加载接触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。
我在[formGroup]
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实例(您可以在类中创建一个)。
我无法理解我的代码有什么问题。
答案 0 :(得分:16)
您需要将formGroup(在您的情况下为 contact_form )传递给 ang-form
的子组件<强> 发动机加载接触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>
在你的ang-form.component.ts中添加 @Input()组:FormGroup;
答案 1 :(得分:13)
这样做有很多选择。
1)这是一个使用formControl指令和角度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;
}
}
<强> Stackblitz Example 强>
2)在子组件上定义ControlContainer视图提供程序的另一种方法:
@Component({
selector: 'ang-form',
template: `
<input formControlName="contact_form_title">
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class AngForm { }
有关更多示例,请参阅:
答案 2 :(得分:0)
将输入内容包装在div中,并将formGroup传递到div中:
<div [formGroup]="formGroup">
<input ...>
</div>
答案 3 :(得分:0)
<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>