Angular forms with signals (making it ready for zoneless change detection)

A lot of my existing Angular code using template-driven forms looks something like this:

Component (*.ts):

protected person: Person;

Template (*.html):

<input type="text" [(ngModel)]="person.firstName">
<input type="text" [(ngModel)]="person.lastName">


Now let's say I'd like to make such an application ready for zoneless Angular. The obvious approach would be using signals. However, the following does not work, as signals are supposed to be immutable:

Component (*.ts):

protected person = model<Person>({ firstName: '', lastName: '' });

Template (*.html):

<input type="text" [(ngModel)]="person().firstName">
<input type="text" [(ngModel)]="person().lastName">


Question:

What's the best practice with modern Angular to bind a form to an object in such a way that it will be compatible with zoneless change detection?

Continue reading...