How to bind a form to a single object signal and keep fields in sync?

Looking at your code, you've got an initial product object that you set up in ngOnInit, you bind some of the fields to various inputs, and then you have a keyup event listener that calculates some fields on the object when they change. Updating this to work with signals requires thinking a little bit differently.

You've got two fields that are just using plain two-way data binding. You can do two-way data binding with signals as per the docs. Once you do this you won't need FormModule anymore!

The other two inputs change each other when the other one changes. There's a bit of a problem here because if you just set this up as an effect that runs when the field changes, you've suddenly created an infinite loop (one effect will run, then the other one, then the first one, etc.).

If you keep the code the same and instead just set the signals on keyup like you're already doing, then this should work and you shouldn't run into issues. I'd recommend creating a signal per field instead of one signal for the entire object, as it's a bit more performant and lets you do derived data with computed signals a lot easier.

In Angular 19-20 has not very advantage using signal instead Template driven forms. The new Angular forms signals (in Angular 22) promise a better approach. See, e.g. this link

Your code with signal (see that use (ngModelChange) to call a function instead of keyUp.

@Component({ selector: 'app-root', imports:[FormsModule,JsonPipe], template: ` <h1>Hello from {{ name }}!</h1> <form (ngSubmit)="save()"> <div class="row"> <div class="col-6 col-lg-3"> <label for="productName">Name:</label> <input id="productName" name="productName" type="text" class="form-control" [(ngModel)]="product().name" /> </div> <div class="col-6 col-lg-3"> <label for="vatRate">VAT rate (%):</label> <input id="vatRate" name="vatRate" type="number" class="form-control" [ngModel]="product().vatRate" (ngModelChange)="change('vatRate',$event)" /> </div> <div class="col-6 col-lg-3"> <label for="priceNet">Price (net):</label> <input id="priceNet" name="priceNet" type="number" class="form-control" [ngModel]="product().priceNet" (ngModelChange)="change('priceNet',$event)" /> </div> <div class="col-6 col-lg-3"> <label for="priceGross">Price (gross):</label> <input id="priceGross" name="priceGross" type="number" class="form-control" [ngModel]="product().priceGross" (ngModelChange)="change('priceGross',$event)" /> </div> </div> <button type="submit" class="btn btn-primary mt-3"> Save product </button> </form> <pre>{{product()|json}}</pre> `, }) export class App implements OnInit{ name = 'Angular'; product=model<Product>({ name: 'Banana', vatRate: 22, priceNet: 0, priceGross: 0, }); constructor(){ } ngOnInit(): void { this.product.set({ name: 'Banana', vatRate: 22, priceNet: 0, priceGross: 0, }); } save() { console.log(this.product); } change(field:string,value:any) { const old={...this.product(),[field]:value} if (field=='priceNet' || field=='vatRate') old.priceGross=old.priceNet*(100+old.vatRate)/100 if (field=='priceGross') old.priceNet=100*old.priceGross/(100+old.vatRate) this.product.update(x=>old) } } 

We can try to use individual signal for varRate,priceNet and price and use computed to create the "product"

 vatRate=model(0 priceGross=model(0) priceNet=model(0) name=model('') product = computed(() => ({ name: this.name(), vatRate: this.vatRate(), priceNet: this.priceNet(), priceGross: this.priceGross(), })) 

We can then use effect to see when change any of the signal or when change the product. but we need store in a variable the old value of the signal. so

 productOld:Product={} as Product //define a variable to stroe the oldValue constructor() { effect(() => { const product = this.product(); if ( product.vatRate != this.productOld.vatRate || product.priceNet != this.productOld.priceNet ) { this.priceGross.set( Math.round(product.priceNet * (100 + product.vatRate)) / 100 ); } if (product.priceGross != this.productOld.priceGross) { this.priceNet.set( Math.round((product.priceGross * 10000) / (100 + product.vatRate)) / 100 ); } this.productOld = { ...this.product() }; }); } 

the last piece can be create a function to "patchValue" the signals

 setValue(product: Product) { this.vatRate.set(product.vatRate); this.priceGross.set(product.priceGross); this.priceNet.set(product.priceNet); this.name.set(product.name); } 

a stackblitz