如何将角度材料形式包装到组件中，并将它们作为formControl元素公开给FormGroup。

Question

我正在尝试将一个组件(例如称为custom-input)封装为基于Angular material组件的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-形式控制(可以控制错误部分)

或

2-使用表单控件名称(绑定到外部表单组，但无法控制错误部分)

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