如何在 Angular 表单组中嵌套 ControlValueAccessor 组件

Question

我有一个自定义组件，它实现 ControlValueAccessor 并正确响应父组件 FormGroup 中的更新，并在 UI 更新时更新该 FormGroup。

现有的App模板是这样的

<form-input
   inputType="radio"
   id="method-del"
   formControlName="method"
   inputValue="Delivery"
><label>Delivery</label>
</form-input>

和表单输入：

@Component({
    selector: 'form-input',
    template: `<input #input 
                type="{{ inputType }}" 
                id="{{ id || formControlName }}"
                [value]="inputValue" 
                (blur)="onBlur($event)" 
                (keyup)="onKeyup(input.value)" 
                (focus)="onFocus(input.value)" 
                (change)="onChange($event)" 
              />`,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputComponent),
            multi: true,
        },
    ],
})
export class InputComponent implements ControlValueAccessor, OnInit {
...
    registerOnChange(fn: any): void {
        this.onChangeCallback = fn;
    }

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

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

但是我现在需要将自定义组件包装在另一个自定义组件中，但我不知道应该怎么做。 包装自定义组件现在是否也需要实现 ControlValueAccessor？ 如果是这样，嵌套自定义组件中的 onChangeCallback 应该如何连接到包装自定义组件中的 onChangeCallback？ 并且两个组件都应该有一个 NG_VALUE_ACCESSOR 的提供者来将 refs 转发给自己吗？ 或者有没有一种奇特的方式来做到这一点，使得包装组件只是一个通过？

-App (<form [formGroup=""]>
 |
  - WrappingInputComponent <-------This needs to be inserted in the chain
    |
     - FormInputComponent
       |
        - <input/>

Answer 1

使用 [formControl] 将 formControl 传递给包装组件

//wrappingInputComponent
@Input(control) control;

<form-input inputType="radio" id="method-del"
   [formControl]="control" inputValue="Delivery">
<label>Delivery</label>
</form-input>

还有你的应用组件

//App component
<form [formGroup]="form">
    <wrapping-component [control]="form.get('method')"><wrapping-component>
</form>