我正在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>
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
使用相同的方式我添加了其他组件(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);
}
}
Run Code Online (Sandbox Code Playgroud)
我收到以下错误 -
错误:formControlName必须与父formGroup指令一起使用.您将要添加formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个).
我无法理解我的代码有什么问题.
我有一个从我的一个组件传递的 ng-template,我有一个占位符来接受传递到我的组件上的 ng-template,如下面的 ngTemplateOutlet 所示。
<div>
<form novalidate #myForm="ngForm">
<ng-container>
<ng-template [ngTemplateOutlet]="myTemplate">
</ng-template>
</ng-container>
</form>
</div>
<!-- this template i am passing it from one of my other components -->
<ng-template #myTemplate>
<input type="text" name="myInput" placeholder="Input"
[(ngModel)]="inputModel" required/>
</ng-template>
Run Code Online (Sandbox Code Playgroud)
这里的问题是我的 form('myForm') 忽略了传递的 ng-template 即使它被标记为需要。我如何确保我的 ngForm 考虑传递的 ng-template