将可配置的复杂字段绑定到 angular 响应式表单

Question

所以我有一个自定义组件，它是一个 multiselect typeahead 下拉列表。在我称之为的页面上，我有反应形式的团体。我想将它绑定到表单控件，就像您对 mat-form-fields 所做的那样，但我不确定如何配置组件以允许这样做

大格式-one.component.html

<form [formGroup]="groupOne">
  <mat-form-field>
    <mat-select formControl="selectControl"></mat-select>
  </mat-form-field>    
  <app-multi-typeahead formControl="howtobindvalues"></app-multi-typeahead>
</form>

在这种情况下，mat-select 绑定到表单控件并且值变得易于管理，验证是统一的并且可以控制事件，我使用的是自定义组件 @Input 和 @输出管理值，并在输出函数中执行 formControl.value = child component selected values.

它不干净，我必须在实例化预输入的每个组件中构建此自定义通信集。

有没有办法让自定义组件像表单域一样工作？

Answer 1

您的组件必须实现 ControlValueAccessor。这是一篇关于它的好文章。 https://blog.angular-university.io/angular-custom-form-controls/

将可配置的复杂字段绑定到 angular 响应式表单

Binding a configurable complex field to angular reactive forms

model-view-controller

webforms

angular