angular - 得到“无提供者异常”将 ngControl 用于子组件

Question

我想使用 Angular2（使用 TypeScript 和 Jade）实现自定义表单。

当我使用my-input我创建的元素作为自定义表单组件而不是input添加ngControl指令时input，我收到异常错误“没有 ControlContainer 的提供程序！”。然后，当我ngControl从input元素中删除时，没有发生错误，但表单功能不起作用（例如验证器）。

父组件

@Component({
  selector: 'top-page',
  template: `
    <form [ngFormModel]="myForm">
      <my-input name="username" placeholder="username is here.">
    </form>
  `,
});
export class TopPageComponent { ... }

子组件

@Component({
  selector: 'my-input',
  template: `
    <label class="custom-class-1">
      <div class="custom-class-2"></div>
      <input type="text" id="{{name}}" placeholder="{{placeholder}}" ngControl="{{name}}" [(ngModel)]="{{name}}">
    </label>
  `,
});
export class MyInputComponent { ... }

为了试用，我将ngControlGroup指令附加到label组件中的my-input元素，但出现错误。（当然，写import Component, Input, etc...在@Input()TypeScript 文件中。）

Answer 1

我认为您应该将表单标签放入您的子组件中：

<form>
  <label class="custom-class-1">
    <div class="custom-class-2"></div>
      <input type="text" id="{{name}}"
             placeholder="{{placeholder}}"
             ngControl="{{name}}" [(ngModel)]="{{name}}">
  </label>
</form>