模板和 react 形式的 Angular 自定义组件

Question

我正在尝试创建一个自定义组件(一个自定义的自动完成字段)，但我想同时处理响应式(Reactive)表单和模板表单 所以有时值会来自 [(ngModel)] 有时我想提供 formControlName

到目前为止，我有 2 个不同的模板，但在我看来，似乎 NG_VALUE_ACCESSOR 正在自行处理它，我的实现中缺少一些东西。

为了让我的问题更清楚 如果您使用 PrimeNg 组件或任何框架，相同的组件可以采用 [(ngModel)] 或 formControlName 并且在这两种情况下它都像普通组件一样运行而无需特殊处理，这就是我想要做的

相同问题的类似问题:

How to wrap a primeng component like autocomplete using reactive forms?

Answer 1

这是一个老问题，但我一直在努力解决同样的问题。以防万一有人遇到这个问题，以下是我如何解释所问内容以及我的解决方案。

我的组件需要能够接收 [value] 并发出一些 (output)，同时还能够简单地接收 formControlName。我也需要解决这个问题。使用以下示例:

<my-button-toggle formControlName="toggleValue"></my-button-toggle>

或

<my-button-toggle
  value="A"
  (toggleChange)="handleChange($event)"
></my-button-toggle>

我为此纠结了一段时间，但在看了this repo 之后它终于让我满意了。

这是我包装的按钮切换组件的 html 结构

<mat-button-toggle-group
  [disabled]="disabled"
  [multiple]="multiple"
  [vertical]="vertical"
  [value]="value"
  (change)="doChange($event)">
...

并且在 ts 中，我们允许 formControlName 以及值设置:

export interface ToggleItem {
  disabled?: boolean
  value?: any
  label: string
}

@Component({
  selector: 'my-button-toggle',
  templateUrl: './button-toggle.component.html',
  styleUrls: ['./button-toggle.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: ButtonToggleComponent,
      multi: true,
    },
  ],
})
export class ButtonToggleComponent implements ControlValueAccessor {
  @Input() value: any = ''
  @Input() disabled = false
  @Input() multiple = false
  @Input() vertical = false
  @Input() toggles: ToggleItem[] = []
  @Output() toggleChange = new EventEmitter<any>()

  onChange = (value: any) => {}
  onTouched = () => {}

  writeValue(value: string): void {
    this.value = value
  }

  registerOnChange(fn: any): void {
    this.onChange = fn
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn
  }

  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled
  }

  doChange = (x: MatButtonToggleChange) => {
    this.value = x.value
    this.onChange(x.value)
    this.toggleChange.emit(x.value)
  }
}

所以，发生的事情是，当触发按钮切换的 (change) 事件时，它会在内部调用 this.onChange，这由 ControlValueAccessor 处理，但随后我还告诉我的自定义输出发出值，以便任何其他类型的非响应式(Reactive)用例仍然可以与组件对话。