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

Question

我有一个带有模板的自动完成功能：

<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

Answer 1

您需要通过实现自定义值访问器来使您的auto-complete 组件与控件兼容。

这是一个示例：

@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