template-driven-form-group.ts

@Component({
    template: `
        <form #form="ngForm" (ngSubmit)="submit(form)">
            <input type="text" name="name"
                [(ngModel)]="controls.name" placeholder="Name" />
            <input type="email" name="email"
                [(ngModel)]="controls.email" placeholder="Email" />
                <div ngModelGroup="address">
                    <input type="text" name="street"
                        [(ngModel)]="controls.address.street" 
                        placeholder="Street" />
                    <input type="text" name="city"
                        [(ngModel)]="controls.address.city" 
                        placeholder="City" />
                    <select 
                        [(ngModel)]="controls.address.country" name="country">
                        <option value="USA">USA</option>
                        <option value="Canada">Canada</option>
                        <option value="Mexico">Mexico</option>
                    </select>
                </div>
                <button type="submit">Submit</button>
        </form>
    `,
})
export class TemplateDrivenFormGroupComponent {
    controls = {
        name: signal(''),
        email: signal(''),
        address: {
            street: signal(''),
            city: signal(''),
            country: signal(''),
        }
    }

    submit(ngForm: NgForm) {
        console.log(ngForm.form.value);
        // will log ``{
        //   name: 'John', 
        //   email: '[email protected]', 
        //   address: {street: '123 Main St', city: 'Anytown', country: 'USA'}
        // }``
    }
}