Imagine having the following structure for a formGroup:
userGroup = {
name,
surname,
address: {
firstLine,
secondLine
}
}
This leads to creating HTML code similar to this:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
<input formControlName="secondLine">
</div>
</form>
Now, let's assume you are required to structure your HTML like so:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
</div>
<hr>
<div formGroupName="someOtherGroup">
<input id="problemSecondLine" formControlName="???.secondLine">
</div>
</form>
Is there a way to ensure that the field with id=problemSecondLine corresponds to
userGroup -> address -> secondLineYou might consider manually updating through ngModel, but seeking a cleaner solution.