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] ]
      });
    });

或者您可以使用响应设置表单值。

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

Answer 2

在我的例子中，有必要在回调中手动运行更改检测。这可以通过导入

来实现

constructor(private changeDetectorRef: ChangeDetectorRef) {
}

和运行宁

this.changeDetectorRef.detectChanges();

Angular 响应式表单 - 来自异步调用的值未更新表单

Angular Reactive forms - Value from Async call not updating form

angular

angular-reactive-forms

angular-forms