Question

我创建了用于编辑地址的对话框组件。我使用“地址”变量将详细信息传递给对话框组件。对话框组件一出现，我就在输入字段中获得了初始值，但在选择框中却没有。请在下面查看我的代码：

.ts

export class EditaddressDialogComponent implements OnInit {
  personId: any;
  editAddressForm: FormGroup;
  barangays: any[] = [];
  municipals: any[] = [];
  provinces: any[] = [];
  regions: any[] = [];

  addressToEdit: any;

  addressTypes: any = [
    {value: 'Home Address', name: 'Home Address'},
    {value: 'Permanent Address', name: 'Permanent Address'},
    {value: 'Billing Address', name: 'Billing Address'}
  ];

  constructor(
    public dialogRef: MatDialogRef<EditaddressDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private fb: FormBuilder,
    private addressService: AddressService
  ) { }

  ngOnInit() {
    this.getRegions();
    this.addressToEdit = this.data;
    this.editAddressForm = this.fb.group({
      addresstype: [this.data.address.AddressType, Validators.required],
      unitnumber: [this.data.address.UnitNumber],
      housenumber: [this.data.address.HouseNumber],
      streetname: [this.data.address.StreetName],
      villagesubdivision: [this.data.address.VillageSubdivision],
      barangaycode: [this.data.address.BarangayCode],
      municipalcode: [this.data.address.MunicipalCode],
      provincecode: [this.data.address.ProvinceCode],
      regioncode: [this.data.address.RegionCode],
    });
    console.log(this.addressToEdit.address.RegionCode);

  }

  getRegions() {
    this.addressService.getRegions().subscribe((data: any) => {this.regions = data; });
  }

  onRegionChange(event: MatOptionSelectionChange, region: any) {
    this.provinces = null;
    if (event.source.selected) {
      this.addressService.getProvinces(region)
        .subscribe((data: any) => {
          this.provinces = data;
        });
    }
  }

  onProvinceChange(event: MatOptionSelectionChange, province: any) {
    this.municipals = null;
    if (event.source.selected) {
      this.addressService.getMunicipals(province)
        .subscribe((data: any) => {
          this.municipals = data;
        });
    }
  }

  onMunicipalChange(event: MatOptionSelectionChange, municipal: any) {
    this.barangays = null;
    if (event.source.selected) {
      this.addressService.getBarangays(municipal)
        .subscribe((data: any) => {
          this.barangays = data;
        });
    }
  }

   // ============== getters ==================
   get addresstype() {
    return this.editAddressForm.get('addresstype');
  }
  addressTypeError() {
    return this.addresstype.hasError('required') ? 'This field is required' : '';
  }
  get unitnumber() {
    return this.editAddressForm.get('unitnumber');
  }
  get housenumber() {
    return this.editAddressForm.get('housenumber');
  }
  get streetname() {
    return this.editAddressForm.get('streetname');
  }
  get villagesubdivision() {
    return this.editAddressForm.get('villagesubdivision');
  }
  get barangaycode() {
    return this.editAddressForm.get('barangaycode');
  }
  get municipalcode() {
    return this.editAddressForm.get('municipalcode');
  }
  get provincecode() {
    return this.provincecode.get('provincecode');
  }
  get regioncode() {
    return this.editAddressForm.get('regioncode');
  }
}

.html

<form [formGroup]="editAddressForm">

        <div class="col-md-6">
          <div class="occupy-half">
            <mat-form-field>
              <mat-select placeholder="Address Type" formControlName="addresstype">
                <mat-option>--</mat-option>
                <mat-option *ngFor="let type of addressTypes" [value]="type.value">
                  {{type.name}}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="addresstype.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ addressTypeError() }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Unit Number</mat-label>
              <input type="text" matInput formControlName="unitnumber">
            </mat-form-field>
            <mat-form-field>
              <mat-label>House Number</mat-label>
              <input type="text" matInput formControlName="housenumber">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Street Name</mat-label>
              <input type="text" matInput formControlName="streetname">
            </mat-form-field>
            <mat-form-field>
              <mat-label>Village / Subdivision</mat-label>
              <input type="text" matInput formControlName="villagesubdivision">
            </mat-form-field>
          </div>
        </div>

        <div class="col-md-6">
          <div class="occupy-half">
            <mat-form-field>
              <mat-select placeholder="Region" formControlName="regioncode">
                <mat-option>--</mat-option>
                <mat-option *ngFor="let region of regions" [value]="region.RegionCode" (onSelectionChange)="onRegionChange($event, region.RegionCode)">
                  {{region.Region}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Province" formControlName="provincecode">
                <mat-option>--</mat-option>
                <mat-option *ngFor="let province of provinces" [value]="province.ProvinceCode" (onSelectionChange)="onProvinceChange($event, province.ProvinceCode)">
                  {{province.ProvinceName}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Municipal" formControlName="municipalcode">
                <mat-option>--</mat-option>
                <mat-option *ngFor="let municipal of municipals" [value]="municipal.MunicipalCode" (onSelectionChange)="onMunicipalChange($event, municipal.MunicipalCode)">
                  {{municipal.MunicipalName}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Barangay" formControlName="barangaycode">
                <mat-option>--</mat-option>
                <mat-option *ngFor="let barangay of barangays" [value]="barangay.BarangayCode">
                  {{barangay.BarangayName}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <button mat-raised-button color="accent" style="display: block; width: 100%;" (click)="onSubmit()">Submit</button>
          </div>
        </div>
      </form>

当我在OnInit期间使用控制台日志时，我会在输入框和选择框中获得应该使用的值。实际上，就像我说的一样，我在输入框中输入了它。但是在选择框中，我什么也没得到。虽然，当我更改“区域”框时，会触发onchange事件。你能帮忙吗？谢谢。

Answer 1

我会在您的compareWith中使用mat-select函数。此方法（在ts文件中定义）将用于比较。

示例HTML：

<mat-select placeholder="Address Type" formControlName="addresstype" [compareWith]="compareById">
   <mat-option *ngFor="let type of addressTypes" [value]="type"> {{ type.name }} </md-option>
</mat-select>

TS comapreWithFunction示例：

addressTypes: any = [
    {id: 1, value: 'Home Address', name: 'Home Address'},
    {id: 2, value: 'Permanent Address', name: 'Permanent Address'},
    {id: 3, value: 'Billing Address', name: 'Billing Address'}
  ];

compareById(obj1, obj2) {
   return obj1.id === obj2.id;
}

然后addresstype的formcontroll将需要一个addresstype对象，而不仅仅是值。

FormBuilder不会在选择框上呈现初始值

1 个答案: