我试图将一个组件(例如名为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还是有更好的方法用于材料输入组件?
经过长时间的搜索,主要是因为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,但无法控制错误部分)
因此,如果有人有更好的答案,请发布它以帮助每个人。