我正在按照本指南ControlContainer
创建可重复使用的表单,成功创建了可重复使用的表单组,但是当我尝试使用 创建可重复使用的表单元素时matInput
,遇到了No value accessor
错误。这是my-form-field.ts
文件:
import { Component, Input, OnInit } from '@angular/core';
import {
ControlContainer,
FormBuilder, FormControl,
FormGroup,
FormGroupDirective,
} from '@angular/forms';
@Component({
selector: 'my-form-field',
template: `
<mat-form-field>
<mat-label>{{label}}</mat-label>
<input matInput [formControlName]="formControlName">
</mat-form-field>
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
})
export class MyFormFieldComponent implements OnInit {
@Input() formControlName: string;
@Input() label: string;
formGroup: FormGroup;
constructor(private ctrlContainer: FormGroupDirective, private formBuilder: FormBuilder) {
}
ngOnInit(): void {
this.formGroup = this.ctrlContainer.form;
const control = new FormControl('');
this.formGroup.addControl(this.formControlName, control);
}
}
这是我使用它的方式:
<form [formGroup]='formGroup'>
<my-form-field label='Test' formControlName='name'></my-form-field>
</form>
在此处重新创建示例: https ://stackblitz.com/edit/angular-9-material-reusable-matinput?file=src/app/my-form-field.ts
我的方法可能是错误的,因此对可重用 matInput 表单组件的建议也可以。