How to add "formControlName" to angular reactive forms "formGroup" from child components?

Viewed 49

I have dynamic components in form and I want to connect fields with angular reactive forms.

for example we have

first-component.html

<form [formGroup]="myform">
...
   <second-component></second-component>
...
   <button type="submit">
</form>

second-component.html

<div ngFor ...>
...
   <third-component></third-component>
...
</div>

third-component.html

<div>
...
   <input type="text">
...
</div>

How to add "FormControlName" in third component, that is field?

1 Answers

You should pass the formGroup as @input to the child components, and then before the html input specify the relative formGroup

Another method is that you specify the formControl itself, like this:

<input [formControl]="formGroup.get('inputName')" type text>

See this link for more information on the topic: https://angular.io/guide/dynamic-form

Related