Угловые формы не дают значения ошибки доступа, когда я передаю formcontrol потомку

Question

Почему я получил ошибку «Нет доступа к значению для управления формой с неопределенным именем»?

У меня есть edit-component:

html

 <mat-form-field>
  <input [formControl]="formControl">
 </mat-form-field>

ts:

 @Input formControl;

В родительском компоненте (главный редактор):

html:

<edit-component [formControl]="data">

ts:

get data() {
 return this.form.get('data');
}

constructor(private fb: FormBuilder) {
 this.form = this.fb.group({ data: [''] });
}

Answer 1

В @Input() декораторе мы не можем предоставить formContolName как String.мы можем напрямую предоставить formControl, но помните [AnyOtherName] вместо [formControl].

<form [formGroup]="form">
  <app-test [control]="form.controls.data"></app-test>
</form>

проверьте по ссылке:

https://stackblitz.com/edit/angular-9kpk3i?file=src%2Fapp%2Ftest%2Ftest.component.html

Answer 2

Это потому, что [formControl] нельзя установить на edit-component.Если вы добавляете реактивные входные данные для компонента, вам нужно реализовать NG_VALUE_ACCESSOR.

Заменить <edit-component [formControl]="data"> на что-то еще, например <edit-component [myCustomFormControl]="data"> и

<mat-form-field>
  <input [formControl]="myCustomFormControl">
 </mat-form-field>