Я подписан на это руководство с 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 тоже приемлемо.
{ provide: ControlContainer, useExisting: FormGroupDirective }
, или напрямую передающий FormControl. - person Eliseo   schedule 04.10.2020