得到“没有提供者例外”把ngControl的子组件

Question

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

当我用my-input元素我自定义表单组件，而不是input创建并添加ngControl指令input，我得到异常错误“无提供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指令label元素my-input成分，但得到的错误。 （当然，在打字稿文件中写道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>