时间戳

首页 > 解决方案 > 提交后表单中未捕获 mat-form-field 中的值

angular - 提交后表单中未捕获 mat-form-field 中的值

问题描述

当一个人选择邮政编码时，我已经实现了该功能，然后名称将如图所示呈现。问题是当我提交表单时，我没有看到正在捕获的邮政编码名称，如下面的控制台日志所示。有什么想法可以解决这个问题吗？

用户界面

在此处输入图像描述

控制台日志

在此处输入图像描述

HTML 文件

  <mat-form-field>
    <mat-label>Postal Code</mat-label>
    <!-- <input matInput formControlName="businessPostalCode" required> -->
    <mat-select formControlName="businessPostalCode" [(value)]="selected" (selectionChange)="onSelectionPostalCodeChange($event.value)">
      <mat-option *ngFor="let postalcode of postalcodes" [value]="postalcode.code">
        {{postalcode.code}}
      </mat-option>
    </mat-select>
    <mat-error>This field is required</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Postal Code Name</mat-label>
    <input matInput formControlName="businessPostalCodeName" [value] ="postalcode" required>
    <mat-error>This field is required</mat-error>
  </mat-form-field>
TS 文件 
        this.businessRegisterformGroup = this._formBuilder.group({
          formArray: this._formBuilder.array([
            this._formBuilder.group({
              businessName: ['', Validators.required],
              businessSize: ['', Validators.required],
              numberOfEmployees: ['', Validators.required],
              kraPinNumber: ['', Validators.required],
              vatNumber: ['', Validators.required],
              businessPhoneNumber: ['', Validators.required],
              businessOtherNumber: ['', Validators.required],
              businessEmail: ['', Validators.required],
              businessFaxNumber: ['', Validators.required],
              businessPoBoxNumber: ['', Validators.required],
              businessPostalCode:  ['', Validators.required],
              businessPostalCodeName: ['', Validators.required],
              businessTown: ['', Validators.required],
              businessSubCounty: ['', Validators.required],
              businessWard:  ['', Validators.required],
            }),
        **..........**

  onSelectionPostalCodeChange(e) {
    this.postalCodeNumber = e;
    // console.log(e);

    const res = this.postalCodeDetail(e);
    const c = this.businessRegisterformGroup.patchValue({
      businessPostalCodeName: res
    });
  }

  postalCodeDetail(code) {
    this.apiPostalCodeDetail.getPostalCodeDetail(code)
      .subscribe(res => {

        this.postalcode = res.name;
        // console.log(res);
      });
  }

标签： angularangular-material

解决方案

您应该使用 ngModel 作为邮政编码名称的值

<input matInput formControlName="businessPostalCodeName" [(ngModel)]="postalcode" required>

此外，您可能希望 JSON.parse 来自 getPostalCodeDetail 调用的响应

this.apiPostalCodeDetail.getPostalCodeDetail(code)
      .subscribe(res => {
        // export an interface with the same structure and typings as the response
        this.exportedInterface = JSON.parse(res);
        this.postalcode = this.exportedInterface.name;
        // console.log(res);
      });

导出接口或使用与您期望接收的数据具有相同结构的类是一个不错的主意。它将允许您更可靠地访问返回的数据。此外，大约 99% 的时间你收到一个 api 响应，它将为旅程进行字符串化，所以我假设你需要将返回的字符串转换为实际的对象或数组。

我希望这有帮助。

推荐阅读