Angular反应形式-来自异步调用的值未更新形式

Question

我正在从我的API中获取车辆数据的信息。然后验证字段。

我的ts文件看起来像这样：

vehicleDetails = new CartellInfo();

ngOnInit() {
this.claimForm = this.formBuilder.group({
  plateNumber: [ this.vehicleDetails.registration, [Validators.required] ],
  vehicleManufacturer: [ this.vehicleDetails.make, [Validators.required] ],
  vehicleModel: [ this.vehicleDetails.model, [Validators.required] ],
  vehicleRange: [ this.vehicleDetails.description, [Validators.required] ],
  chasisNumber: [ this.vehicleDetails.chassisNumber, [Validators.required] ],
  fuelType: [ this.vehicleDetails.fuelType, [Validators.required] ],
  dateFirstRegistered: [ this.vehicleDetails.firstRegistrationDate, [Validators.required] ],
  engineCapacity: [ this.vehicleDetails.engineCapacity, [Validators.required] ]
});
}

findVehicle() {
if (this.registration !== null) {

  this.cartellService.findVehicle(this.registration)
  .subscribe(
    res => {
      this.vehicleFound = true;
      this.vehicleDetails = res;
    });
}
}

其中一个的HTML看起来像这样：

<button class="btn btn-secondary" (click)="findVehicle()">FIND VEHICLE</button>

 <input class="form-control"
            [ngClass]="{'mat-form-field-readonly': vehicleDetails.model || available }"
            [readonly]="vehicleDetails.model || available"
            name="vehicleModel"
            [formControl]="f.vehicleModel">
            <mat-error *ngIf="submitted && f.vehicleModel.hasError('required')">
              Vehicle model is <strong>required</strong>
            </mat-error>

但是我的输入没有反映出来自API的数据。如果您在后面查看代码，则该值在那里，但没有显示出来。

我做错了什么？

Answer 1

收到回复后，您需要设置表格。

this.cartellService.findVehicle(this.registration)
  .subscribe(
    res => {
      this.vehicleFound = true;
      this.vehicleDetails = res;
      this.claimForm = this.formBuilder.group({
          plateNumber: [ this.vehicleDetails.registration, [Validators.required] ],
          vehicleManufacturer: [ this.vehicleDetails.make, [Validators.required] ],
          vehicleModel: [ this.vehicleDetails.model, [Validators.required] ],
          vehicleRange: [ this.vehicleDetails.description, [Validators.required] ],
          chasisNumber: [ this.vehicleDetails.chassisNumber, [Validators.required] ],
          fuelType: [ this.vehicleDetails.fuelType, [Validators.required] ],
          dateFirstRegistered: [ this.vehicleDetails.firstRegistrationDate, [Validators.required] ],
          engineCapacity: [ this.vehicleDetails.engineCapacity, [Validators.required] ]
      });
    });