Angular2 在构建简单表单时没有 ControlContainer 的提供者

Question

这是我的表格：

app.component.html

<form [ngFormModel]="myForm">
    <my-child-component></my-child-component>
</form>

app.component.ts

constructor ( private _formBuilder : FormBuilder ) {
    this.myForm = _formBuilder.group( {
        firstName : ["",Validators.required]
    } );
}

my-child-component:

 <input type="text" ngControl="firstName">

错误：

   No provider for ControlContainer 
   [ERROR ->]<md-input
            ngControl="firstName"
            placeholder="First name">

如果我将输入移动到应用程序组件本身内部，它会起作用，但我的输入是在 child 组件中。

FORM_DIRECTIVES 和 FORM_PROVIDERS 正在顶级应用程序级别注入。我完全按照他们的指导做了所有事情。

我也尝试将 FORM_DIRECTIVES 添加到 child 或 app.component 但没有成功。

Answer 1

您可以使用 ngFormControl 指令代替 ngControl 并将控制变量传递给子 Input，如下所示：

<form [ngFormModel]="myForm">
  <my-child-component [control]="myForm.controls.firstName"></my-child-component>
</form>

Child.component

@Component({
  selector: 'my-child-component',
  template: `
    <input type="text" [ngFormControl]="control">  
  `,
  directives: [FORM_DIRECTIVES]
})
export class Child {
  @Input() control: Control;
}

另请参阅 plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

子模板中的表单标记需要 NgControl 指令

另见

Answer 2

或者，您可以通过将其添加到子组件声明来使用父级的现有表单。

viewProviders: [{provide: ControlContainer, useExisting: NgForm}]

Angular2 在构建简单表单时没有 ControlContainer 的提供者

Angular2 No provider for ControlContainer when building a simple form

angular2-forms

angular