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

Question

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

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

Answer 1

您需要将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>

添加@Input()组:FormGroup; 在你的ang-form.component.ts中

Answer 2

这样做有很多选择.

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示例

2)在子组件上定义ControlContainer视图提供程序的另一种方法:

@Component({
  selector: 'ang-form',
  template: `
     <input formControlName="contact_form_title">
    `,
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class AngForm { }

Stackblitz示例

有关更多示例,请参阅

• Angular 2反应形式的嵌套数组？

• Angular2嵌套模板驱动表单