0

I am creating an editAddress component. Before the editAddress component is called, I get all data from informationComponent and pass it to my a service. As soon as the editAdress component initializes, I get the values from the service and set it into my input boxes and also get the values from the database for all my other Mat-Select boxes. The problem is, my Mat-Select box should have a default value that is stored in the service and if they click on it, they should have all the options taken from the database. Please see my code below:

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>

I am using the ngModel since that is what I see in the answers I've researched but I would prefer not to because I would like to pass the whole form as like this:

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

UPDATE: This is what I came up so far and still I can't set the default 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>

I checked by using the placeholder as selectedType and I can get the selectedType but not in the mat-select

stack questions
  • 862
  • 2
  • 15
  • 29
  • https://stackoverflow.com/q/50650790/5695162 – Vikas Jun 03 '18 at 04:28
  • Thank you for the link Vikas. I got it to work by removing the ngModel and changing the `[value]="type.AddressTpyeId"` to `[value]="type.AddressTypeName"`. I know there is a typo there but event if I corrected it it still wouldn't let me if I just use the type.AddressTypeId. – stack questions Jun 03 '18 at 04:58

0 Answers0