如何将角材料表单包装到组件中并将它们作为 formControl 元素公开给 FormGroup

Question

我正在尝试将一个组件（例如称为custom-input）封装为基于 Angular 材质组件的 formControl 元素，以包含以下内容：

<mat-form-field >
  <input
    matInput
    [formControl]="inputField"
    formControlName="{{ name }}"
    name="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="inputField.errors">{{
    this.validationService.getErrorMsg(inputField.errors)
  }}</mat-error>
</mat-form-field>

现在这个组件正在使用所需的功能，但不能像普通输入或 matInput一样使用 formControlName 属性绑定到 formGroup（例如下面的例子，它直接绑定到 formGroup 没有问题）

<input
  matInput
  formControlName="inputField123"
  placeholder="{{ 'testInput' | translate }}"
  required
/>

问题是如何让上面的组合组件绑定为formGroup中的formControl元素？我应该实现或公开什么来提供此功能？

我应该使用 ControlValueAccessor 还是有更好的方法用于材质输入组件？

Answer 1

经过长时间的搜索，主要是因为ControlValueAccessor建议用于原始 html 部分（例如输入等，而不是用于材料组件，我认为可能有一些更简单的包装技术）

我终于发现，我们可以实现ControlValueAccessor的建议，或因为这是一个输入框，我们可以用DefaultValueAccessor这样的

@Component({
  selector: 'app-test-input',
  templateUrl: './test-input.component.html',
  styleUrls: ['./test-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => testInputComponent),
      multi: true
    }
  ]
})
export class testInputComponent implements ControlValueAccessor {
  @Input() name = '';
  @Input() maxlength = 250;
  @Input() width = 30;

  @ViewChild(DefaultValueAccessor) valueAccessor: DefaultValueAccessor;

  writeValue(obj: any) {
    this.valueAccessor.writeValue(obj);
  }

  registerOnChange(fn: any) {
    this.valueAccessor.registerOnChange(fn);
  }

  registerOnTouched(fn: any) {
    this.valueAccessor.registerOnTouched(fn);
  }

  setDisabledState(isDisabled: boolean) {
    this.valueAccessor.setDisabledState(isDisabled);
  }

  constructor(public dataService: DataService) {
  }

}

html部分是这样的：

<mat-form-field fxFlex="100" >
  <input
    matInput
    formControlName="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="matInputSelector.errors">{{
    this.dataService.getErrorMsg(matInputSelector.errors)
  }}</mat-error>
</mat-form-field>

笔记

如果我使用，formControlName="{{ name }}"我可以将控件绑定到formGroup，但是，我不能使用该formControl属性绑定到组件的错误部分

即：我可以使用：

1- formControl（可以控制出错部分）

或者

2-使用formControlName（绑定到外层formGroup，但无法控制错误部分）

所以如果有人有更好的答案，请发布它以帮助大家。