Here is a form with grouped inputs using the ngModelGroup directive:
<form #form="ngForm" (ngSubmit)="submit(form.value)">
<fieldset ngModelGroup="user">
<div>
<label>Firstname:</label>
<input type="text" name="firstname" [(ngModel)]="firstname">
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastname" [(ngModel)]="lastname">
</div>
</fieldset>
<fieldset ngModelGroup="address">
<div>
<label>Street:</label>
<input type="text" name="street" [(ngModel)]="street">
</div>
<div>
<label>Zip:</label>
<input type="text" name="zip" [(ngModel)]="zip">
</div>
<div>
<label>City:</label>
<input type="text" name="city" [(ngModel)]="city">
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
Is it necessary to use ngModelGroup when mapping [(ngModel)] to nested objects like user.firstname or user.lastname? This approach may raise questions about the need for ngModelGroup altogether.
Can you provide clarity on how to effectively utilize ngModelGroup for nested objects?
Check out the Plunker for reference: https://plnkr.co/edit/Y4bjFh6sjtvdzkUWciid?p=preview