获得 "No provider Exception" 为子组件放置 ngControl

Question

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

当我使用 my-input 作为自定义表单组件而不是 input 创建的元素并将 ngControl 指令添加到 input 时，出现异常错误 "No provider for ControlContainer!".然后，当我从 input 元素中删除 ngControl 时，没有发生错误，但表单函数不起作用（例如验证器）。

父组件

@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 指令附加到 my-input 组件中的 label 元素，但出现错误。（当然，在TypeScript文件中写了import Component, Input, etc...和@Input()。）

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>

获得 "No provider Exception" 为子组件放置 ngControl

Got "No provider Exception" putting ngControl for sub-component

angular

angular-forms