Angular 2将控件添加到父组件的表单

我有一个完整的模板自动完成：

<input [(ngModel)]="model"> //todo add control

它实现如下：

<div class="form-group">
  <label for="location">Location</label>
  <auto-complete [(model)]="model.location"></auto-complete>
</div>

除此之外,我还有其他字段遵循以下格式:(通知验证指令)

<div class="form-group" [fieldValidity]="biography">
  <label for="currentPassword">Biography</label>
  <textarea
    [(ngModel)]="model.biography" ngControl="biography" #biography="ngForm" maxlength="300"
    class="form-control" placeholder="About me..." rows="4"></textarea>
    <p class="xui-meta-info">
      We suggest a short bio. If it's 300 characters or less it'll look great on your profile.
    </p>
  <field-validation-messages [field]="biography"></field-validation-messages>
</div>

如您所见,我的验证指令依赖于在表单上具有关联控件的输入.如何确保自动完成输入在父表单中具有关联控件？ (我尝试以编程方式创建一个新的Control(),然后调用form.addControl(),但只接受一个NgControl

您需要通过实现自定义值访问器使您的自动完成组件与控件兼容.

这是一个示例：

@Component({
  selector: 'auto-complete',template: `
    <input [(ngModel)]="model" (ngModelChange)="onChange($event)>
  `,(...)
})
export class AutoCompleteComponent implements AfterViewInit,ControlValueAccessor {

  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value: any): void {
    this.model = value;
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

这样您就可以通过以下方式直接添加对自动完成组件的控制：

<auto-complete
  [(model)]="model.location"
  [ngFormControl]="someCtrl">
  <!-- or #autoComplete="ngForm" ngControl="autoComplete" -->
</auto-complete>

有关更多详细信息,请参阅此文章(“与NgModel兼容的组件”部分)：

> http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

这个问题也可以帮到你：

> Custom checkbox input component styled with Switchery

原文地址：https://www.jb51.cc/angularjs/142525.html