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

#angular #input #angular-forms

#угловые #ввод #угловые формы

Вопрос:

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

У меня есть 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: [''] });
}

Ответ №1:

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

Измените <edit-component [formControl]="data"> на что-то другое, например <edit-component [myCustomFormControl]="data"> , и

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

1. Не работает, потому что formcontrol и myCustomFormControl — это просто имя. Как я могу реализовать NG_VALUE_ACCESSOR для решения этой проблемы?

2. [formControl] для компонента это не просто имя. Ваше поле @Input() edit-component должно быть другим, чем formControl , например, myCustomFormControl.

3. Проверьте ссылку, указанную в другом ответе, stackblitz.com/edit / … , вы увидите, что [FormControl] был заменен на [control] для «edit-component»

4. Спасибо! Тот факт, что я назвал свой Input () как ‘FormControl’, был причиной того, что я получал эту ошибку, хотя все работало!

Ответ №2:

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

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

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

https://stackblitz.com/edit/angular-9kpk3i?file=src/app/test/test.component.html