Angular 8 Реактивные формы с примером многократно используемых дочерних компонентов - PullRequest
0 голосов
/ 15 февраля 2020

Я создал решение на stackblitz.com , используя Angular Реактивные формы и дочерние компоненты. Тем не менее, - я получаю сообщение об ошибке при использовании formControlName на элементах ввода. Может кто-нибудь привести пример использования Reactive Forms и дочерних компонентов?

Проблема в company.component. html

<input type="text" formControlName="companyName">

1 Ответ

0 голосов
/ 16 февраля 2020

Вы используете formControlName неправильно.

formControlName является атрибутом HTML для FormGroup для интерпретации при анализе шаблона и присоединения обработчиков, для него не требуются квадратные скобки [].

Эта путаница часто возникает из-за того, что вы используете Angular тег ввода [formControl] для присоединения автономного FormControl, то есть [formControl]="myFormControl"

In addresss.component.html и company.component.html вам нужно изменить свой formControlNames на формат: formControlName="{{formControlName}}"

Кроме того, вы можете создать отдельные FormControls public StreetNameFormControl = new FormControl('') в этих компонентах и ​​ссылаться на них в таком формате, как: [formControl]="StreetNameFormControl" .

РЕДАКТИРОВАТЬ: В качестве дополнительного примечания, из опыта, создание форм таким образом часто приводит к душевной боли. Это возможно, но если вам действительно не нужно разбивать форму на эти подкомпоненты, я бы посоветовал не делать этого. Одна из проблем, с которой вы, вероятно, столкнетесь, - это заполнение форм позже, например, если вы хотите использовать их повторно для редактирования существующей сущности. Вам нужно будет написать собственный код для передачи значений по всем компонентам для их заполнения. С другой стороны, если у вас есть их как один FormGroup, у вас есть удобные методы, такие как patchValue в вашем распоряжении.

...