将 angular2 表单指令应用于自定义输入表单元素答案

【问题标题】：Applying angular2 form directives to custom input form elements将 angular2 表单指令应用于自定义输入表单元素
【发布时间】：2016-06-09 09:58:26
【问题描述】：

我想创建一个自定义的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，您可以跟踪控制器内的字段值。

@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 传播到由<inputCustom> 包裹的内部<input> 元素？

Q3：我应该如何在ControlGroup周围的表单中注册我的Control？

【问题讨论】：

这在 Angular 1.x 中曾经很简单，现在很痛苦: (

标签： twitter-bootstrap angularjs-directive angular angular2-forms

【解决方案1】：

实现自定义输入表单元素的 Angular 2 材料是了解如何实现 ValueAccessor 的重要信息来源。

所以只需在此处深入源代码并查看输入组件： https://github.com/angular/material2

【讨论】：

【解决方案2】：

我想自定义 ValueAccessor 应该可以。

见
- https://plnkr.co/edit/Bz7wLC5qq7s6Fph1UwpC?p=preview（DI 提供的值访问器）

    providers: [provide(NG_VALUE_ACCESSOR, {useClass: UIDropdownComp, multi: true})]
})
export class UIDropdownComp implements ControlValueAccessor {

- http://plnkr.co/edit/slVMz6Kgv6KlnUNMDe3o?p=preview（ngControl 注入到组件和值访问器“手动”分配

export class Address implements ControlValueAccessor{
addressForm: ControlGroup;
    value:any;
     addressForm: ControlGroup;
  constructor(@Optional() ngControl: NgControl, elementRef: ElementRef,fb: FormBuilder) {  
    ngControl.valueAccessor = this;

另见https://github.com/angular/angular/issues/2543

【讨论】：

【解决方案3】：

我看到了两种实现方式：

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

@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/

【讨论】：