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">

如果我在app组件内部移动输入，它会起作用，但我的输入是在子组件内。

FORM_DIRECTIVES和FORM_PROVIDERS正在顶级应用级注入。我按照他们的指南做了一切。

我还尝试将FORM_DIRECTIVES添加到子级或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

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

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="headerDiv">
    <h1>Site Heading</h1>
  </div>
  <ul id="navBar">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
  <div id="contentDiv">
  </div>
</body>

</html>

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

2 个答案: