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元素，但会收到错误。（当然，在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>

得到“没有提供者异常”将ngControl放入子组件

1 个答案: