'storing input value and response data as one object in angular

I am trying to store two properties as input value in my JSON, but other properties must be stored as the data for specific item that i get from API. how can i achieve that?

My stackblitz

.ts

ngOnInit() {
    this.http
      .get<any>('https://*************')
      .subscribe((data) => {
        this.carPartCategories = data;
        console.log(this.carPartCategories);
        this.carPartStatusCtrl = this.createFormArray(this.carPartCategories);
        this.updateEstimation = this.fb.group({
          carPartStatus: this.carPartStatusCtrl,
        });
      });
  }

 get data(): any {
    let value = this.updateEstimation.value;
    return (this.finalData = {
      carPartSubCategories: value.carPartStatus?.map((i) => ({
        price: i.price,
        status: i.status,
        account_number: this.carPartCategories.account_number, //returns undefiened
        bank_name: this.carPartCategories.bank_name, //returns undefiened
      })),
    });
  }

price and status are the values from input, but other properties i want to store as the data i got from API.

.html

<form [formGroup]="updateEstimation" *ngIf="updateEstimation">
  {{updateEstimation.value | json}}
  <ng-container formArrayName="carPartStatus">
    <ng-container *ngFor="let i of carPartCategories; let j = index">
      <ng-container [formGroupName]="j">
        <div class="content-desc mt-4 mb-5">
          <div class="row mt-4 parts-row align-items-center">
            <div class="col-lg-2">
              <span class="p-2 nusx">
                {{ i.bank_name }}
              </span>
            </div>
            <div class="col-lg-3">
              <span class="p-2 nusx">
                {{ i.iban }}
              </span>
            </div>
            <div class="col-lg-2">
              <span class="p-2 nusx">
                <mat-form-field appearance="fill">
                  <mat-label>choose</mat-label>
                  <mat-select formControlName="status">
                    <mat-option> test </mat-option>
                  </mat-select>
                </mat-form-field>
              </span>
            </div>
            <div class="col-lg-2">
              <span class="p-2 nusx"> X{{ i.id }} </span>
            </div>
            <div class="col-lg-2 price">
              <input
                type="text"
                placeholder="price"
                class="form-control"
                formControlName="price"
              />
            </div>
          </div>
        </div>
        <div class="comment mt-4 mb-5" *ngIf="i.uid">
          <p class="mtav">comment</p>
          <p class="nusx">{{ i.uid }}</p>
        </div>
        <hr />
      </ng-container>
    </ng-container>
  </ng-container>

(*) the http.gets return an array in the way

[{"id":1234,"uid":"....","account_number":"....","iban":"...",
  "bank_name":"PGMS (GLASGOW)","routing_number":"....",
  "swift_bic":"...."},
  {"id":5678,"uid":".....","account_number":"....","iban":"....",
  "bank_name":"THE ROYAL BANK OF SCOTLAND","routing_number":"....",
  "swift_bic":"..."}]


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source