Question

我正在创建一个editAddress组件。在调用editAddress组件之前，我从informationComponent获取所有数据并将其传递给我的service。只要editAdress组件初始化，我就会从service获取值并将其设置到我的输入框中，并从数据库中获取所有其他Mat-Select框的值。问题是，我的Mat-Select框应该有一个存储在service中的默认值，如果他们点击它，它们应该具有从数据库中获取的所有选项。请参阅下面的代码：

addressInitialData: any; // <== will store data from service
selectedType: string; // <== will store the addresstype from the service

ngOnInit() {
    this.getAddressTypes(); // <== get all address types from database
    this.addressInitialData = this.genParams.addressToEdit; // <== setting values from service to addressInitData

    // creating the form
    this.editAddressForm = this.fb.group({
      unitnumber: [this.addressInitialData.UnitNumber],
      housenumber: [this.addressInitialData.HouseNumber],
      streetname: [this.addressInitialData.StreetName],
      villagesubdivision: [this.addressInitialData.VillageSubdivision],
      barangaycode: [this.addressInitialData.BarangayCode, Validators.required],
      municipalcode: [this.addressInitialData.MunicipalCode, Validators.required],
      provincecode: [this.addressInitialData.ProvinceCode, Validators.required],
      regioncode: [this.addressInitialData.RegionCode, Validators.required],
      addresstypeid: [this.addressInitialData.AddressType, Validators.required] // <== set the addresstype on the form (Mat-Select)
    });

    this.selectedType = this.addressInitialData.AddressType; // <== using the ngModel
} 

getAddressTypes() {
    this.addressService.getAddressTypeList()
        .subscribe((data: any) => {
            this.addresstypes = data;
    });
}

// to get addresstypeid value
get addresstypeid() {
    return this.editAddressForm.get('addresstypeid');
}

getAddressTypeIdError() {
    return this.municipalcode.hasError('required') ? 'Address type is required' : '';
}

onAddressTypeChange(event: MatOptionSelectionChange, type: any) {
    if (event.source.selected) {
        return;
    }
}

HTML

<mat-form-field appearance="outline">
    <mat-select placeholder="Type" formControlName="addresstypeid" [(ngModel)]="selectedType">
      <mat-option>--</mat-option>
      <mat-option *ngFor="let type of addresstypes" [value]="type.AddressTpyeId" (onSelectionChange)="onAddressTypeChange($event, type)">
        {{type.AddressTypeName}}
      </mat-option>
    </mat-select>
    <mat-icon matSuffix>contacts</mat-icon>
    <mat-error *ngIf="addresstypeid.invalid">
      <mat-icon matSuffix>block</mat-icon> &nbsp; {{getAddressTypeIdError()}}</mat-error>
 </mat-form-field>

我正在使用ngModel，因为这是我在我研究过的答案中看到的，但我不愿意，因为我想将整个表单传递给：

this.addressService.EditAddress(this.editAddressForm.value)

更新：这是我到目前为止所提出的，但我仍然无法设置默认值。

<mat-form-field appearance="outline" style="margin-left: 10px; margin-top: 10px;">
<mat-select [(value)]="selectedType" placeholder="Address Type" formControlName="addresstypeid">
  <mat-option>--</mat-option>
  <mat-option *ngFor="let type of addresstypes" [value]="type.AddressTpyeId" >
    {{type.AddressTypeName}} 
  </mat-option>
</mat-select>
<mat-icon matSuffix>contacts</mat-icon>
<mat-error *ngIf="addresstypeid.invalid">
  <mat-icon matSuffix>block</mat-icon> &nbsp; {{getAddressTypeIdError()}}</mat-error>
</mat-form-field>

我使用占位符selectedType进行了检查，我可以获得selectedType但不在mat-select

中

设置Mat-Select的默认值不起作用

0 个答案: