My requirement is to fill textboxes with their corresponding value from database to when the textbox changed. For instance, if the value Mary is enter in name textbox then its corresponding row from the database table such as spoon and plate should be displayed in store A and store B textbox.

Component.ts

 public orderForm = new FormGroup({
   Id: new FormControl(null),
   Name: new FormControl(null),
   StoreA: new FormControl(null),
   StoreB: new FormControl(null),    
 });

Name: string = ''; 
Store_A: string = ''; 
Store_B: string = ''; 

updateOtherFields(args: any): void {
  if (this.orderForm) {
    this.service.getData(args.orderForm.Name).subscribe((data) => {
      this.Store_A = args.itemData.StoreA;
      this.Store_B = args.itemData.StoreB;
  });
  } else {
    this.Store_A = '';
    this.Store_B = '';
  }
 }

html

 <input type="text" [(ngModel)]="Name" (ngModelChange)="updateOtherFields()">
 <input type="text" [(ngModel)]="StoreA">
 <input type="text" [(ngModel)]="StoreB">

Expect output (textbox value)

|Mary|

|Spoon|

|Plate|