相关疑难解决方法(0)

Angular 4 - 错误:formControlName必须与父formGroup指令一起使用

我正在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实例(您可以在类中创建一个).

我无法理解我的代码有什么问题.

angular

12
推荐指数
2
解决办法
2万
查看次数

ngTemplateOutlet - Angular 5 嵌套模板驱动表单

我有一个从我的一个组件传递的 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

nested-forms ng-template angular angular-forms

3
推荐指数
1
解决办法
1352
查看次数