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

Question

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

我的自定义组件只是对输入字段进行换行，并将Bootstrap material design用于look'n'feel。

@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指令？

问题2：如何传播ngControl到内部<input>元素包装<inputCustom>？

问题3：我应该如何在周围表格ControlGroup内注册我的Control？

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/

Answer 2

我想自定义ValueAcc essor应该做的。

参见
- 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

组件和值访问

Answer 3

Angular 2 materia l实现自定义输入表单元素是了解如何实现ValueAccessor的很好的信息来源。

所以才潜入源代码这里看看输入组件： https://github.com/angular/material2