角度-使用补丁在下拉菜单中设置选定的值

Question

I'm creating a "Edit View" for my application, I receive the information from an API call and then I use patch to set those values into my form. I'm facing some major issues on the dropdown select because the patch value doesn't seem to put the default value from the API. Whats is the correct way to bind data from my API into my select?

I searched for similar questions as mine and I found out that I need to set ngModel, I tried inside the option and select tags but it doesnt work either.

Select tag (HTML)

<mat-grid-tile>
    <p class="input-ref mandatory">Industry Type</p>
    <mat-form-field class="full-width" appearance="outline" [floatLabel]="'always'">
        <mat-label>Industry Type</mat-label>
        <mat-select placeholder="" formControlName="IndustryType2">
            <mat-option *ngFor="let industryType2 of industryTypes" [value]="industryType2">
{{ industryType2 }}
            </mat-option>
        </mat-select>
    </mat-form-field>
</mat-grid-tile>

Industry type options (this are always static)

industryTypes = [
        '(MH)',
        '(HS)',
        '(CM)',
        '(HL)',
        '(IS)'
    ];

I create my forms using FormBuild and then I populate the form with an API call

// CREATE FORMS
this.userDetailsForm = this.fb.group({
    IndustryType2: ['']
})

// POPULATE FORMS
this.initRequests().then((data) => {
    this.userDetailsForm.patchValue(data)
})

This is the JSON response I receive from my API

{
    IndustryType2: ["(MH)"],
    OtherProperty: ["Example"],
    ...
}

Answer 1

I have used this approach in my project.

this.form = this.fb.group({
  IndustryType2: this.fb.group({
    id: ['']
  });
});

<mat-form-field class="full-width" formGroupName="IndustryType2"  appearance="outline" [floatLabel]="'always'">
  <mat-label>Industry Type</mat-label>
  <mat-select placeholder="" formControlName="id">
    <mat-option *ngFor="let industryType2 of industryTypes" [value]="industryType2">
      {{ industryType2 }}
    </mat-option>
  </mat-select>
</mat-form-field>

When you patch it will automatically patch your value

solution 2:

you can select the data or id to the by

form.get('controlname').setValue(res.id);

live example: stackblitz

Answer 2

Use this:-

   this.initRequests().then((data) => {
        const keys = Object.keys(data);
        const patchValueData = {};
        keys.forEach(function(key) {
        patchValueData[key] = k[key][0]
        });
        this.userDetailsForm.patchValue(patchValueData)
    });