Whenever I attempt to nest NgModelGroup inside another NgModelGroup, Angular seems to just ignore it. I'm currently utilizing Angular 12 and Template-driven Forms.
Here is how my code appears:
app.component.html
<form #form="ngForm">
<div class="col-auto">
<input name="name" id="name" ngModel /><br />
<app-address></app-address>
</div>
<div class="btn-toolbar">
<button type="submit" (click)="submit(form)">Submit</button>
</div>
<p>{{ form.value | json }}</p>
</form>
address.component.html
<div ngModelGroup="address">
<input name="street" id="street" ngModel />
<app-contact></app-contact>
</div>
contact.component.html
<div ngModelGroup="contact">
<input name="phone" id="phone" ngModel />
</div>
This is the current output:
{
"name":"John Snow",
"address":{
"street":"201 Somewhere Place, 12"
},
"contact":{
"phone":"6405106300"
}
}
And this is the desired outcome that I'm struggling to achieve:
{
"name":"John Snow",
"address":{
"street":"201 Somewhere Place, 12",
"contact":{
"phone":"6405106300"
}
}
}
Feel free to check out the code here: https://stackblitz.com/edit/angular-ivy-osf83a?