проблема со значением патча при обновлении формы

Question

при обновлении формы я использую значение патча для отображения созданных данных в форме, я могу отображать созданные данные во всех полях формы, кроме одного поля. Я использовал setValue также для отображения данных этого конкретного поле, но оно не работает, может кто-нибудь предоставить решение. это код ts

 public addMaterialForm = this.fb.group({

    barcodes:[],
    labelSpecs:[],
    labelSize: [''],

  })

 ngOnInit() { 
    this.receiptSrv.currentSharedMaterial.distinctUntilChanged().subscribe(data => {
      if (data) {
        this.addMaterialForm.patchValue(data);
        this.editMode =true;
      }
    });
  }  

html

<!-- Label Size -->
<div fxLayout="row">
    <mat-form-field>
    <mat-label>Barcodes Size</mat-label>
    <mat-select formControlName="labelSize" required>
        <mat-option *ngFor="let barcode of barcodes" [value]="barcode">
        Barcodes Size- {{barcode.height}} X {{barcode.width}}
        </mat-option>
    </mat-select>
    <mat-error *ngFor="let labelSizeMsg of materialInfoValMsg.labelSize">
        <mat-error class="error-message" *ngIf="addMaterialForm.get('labelSize').hasError(labelSizeMsg.type) &&
            (addMaterialForm.get('labelSize').dirty || addMaterialForm.get('labelSize').touched)">
        {{labelSizeMsg.message}}
        </mat-error>
        </mat-error>
    </mat-form-field>
</div>

Это ответ от бэкэнда

labelSize: "{"createdAt":null,"modifiedAt":null,"createdBy":null,"modifiedBy":null,"id":"641a55d1-1026-4093-b339-02174b09891a","height":1,"width":1}"

Мне нужно показать ширину и высота в поле barcodeSize формы, подобной этой BarcodeSize-1X1.

Answer 1

Чтение этой документации angular -reactive-forms Я видел, как в следующем

метод patchValue () применяет обновление к структуре модели. PatchValue () только обновляет свойства, которые определяет модель формы.

Итак, ваш addMaterialForm - это объект с этой структурой { barcodes: null, labelSpecs: null, labelSize: null }

И вы пытаетесь обновить его с помощью objet с этим Strucutre { "createdAt": null, "modifiedAt": null, "createdBy": null, "modifiedBy": null, "id": "641a55d1-1026-4093-b339-02174b09891a", "height": 1, "width": 1 } Он не будет работать, так как не знает, какие свойства ie вашей формы он должен установить.

Ваш API должен возвращать что-то вроде этого: { "labelSize": { "createdAt": null, "modifiedAt": null, "createdBy": null, "modifiedBy": null, "id": "641a55d1-1026-4093-b339-02174b09891a", "height": 1, "width": 1 } }