如何将角度材质表单包装到组件中并将它们作为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>

现在这个组件正在使用所需的功能，但不能使用formControlName属性绑定到formGroup，如普通输入或matInput（如下面的例子，它直接绑定到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，但无法控制错误部分）

因此，如果有人有更好的答案，请发布它以帮助每个人。