twitter-bootstrap - 将 angular2 表单指令应用于自定义输入表单元素

Question

我想创建一个自定义 InputCustom组件并使用它来创建模型驱动的表单。

我的自定义组件只是包装了一个输入字段并使用了 Bootstrap material design外观。

@Component({
 selector:'inputCustom',
 template:`
    <div class="form-group label-floating is-empty">
        <label class="control-label" for="input">Type here</label>
        <input class="form-control" id="input" type="text">
        <p class="help-block">Some help text</p>
        <span class="material-input"></span>
    </div>
`})
class InputCustom{....}

在 Angular2 中创建模型驱动表单时

<form [ngFormModel]="formRef">
    <input type ="email" ngControl="email">
</form>

全部Controls出现在表单元素上的元素被注册到 ControlGroup 中.通过使用 formRef，您可以跟踪 Controller 内的字段值。

@Component({...})
class FormController{
    formRef: ControlGroup;
    constructor(...){
        this.form.valueChanges.subscribe(data => console.log('changes',  data));
    }
}

现在，我希望人们像这样使用我的组件

<form [ngFormModel]="formRef">
    <inputCustom type ="email" ngControl="email">
</form>

Q1:我需要自己写自定义吗ngControl指令？

Q2:如何传播ngControl到内<input>由 <inputCustom> 包裹的元素？

Q3:我应该如何注册我的Control在周围的表格里面ControlGroup ？

Answer 1

我看到了两种实现方式:

• 提供您的控件作为自定义组件的参数:

  @Component({
    selector: 'inputCustom',
    template: `
      <input [ngFormControl]="control"/>
    `
  export class FormFieldComponent {
    (...)
    @Input()
    control: Control;
  }
  

  这样您的输入将自动采用父组件中定义的表单的一部分。

• 实现 ngModel 兼容组件。实现起来有点长(你需要在自定义指令中实现和注册一个 ControlValueAccessor)但是这样你就可以直接使用 ngFormControl 和 ngModel 直接在您的自定义组件上。

  <inputCustom type ="email" [ngFormControl]="email">
  

  有关详细信息，请参阅此问题:Angular 2 custom form input

我认为这篇文章可能会让您感兴趣:

• 实现 Angular2 表单 – 超越基础知识(第 2 部分)- http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/