javascript - Angular patchValue of a mat-select component - Stack Overflow

admin管理员组

文章数量:1340628

In my Angular 7 app I'am using the ponent mat-select of angular material in a reactive form.

The view looks like this :

<mat-form-field class="col-md-3" color="warn">
   <mat-select placeholder="Selectionner la boutique"
             id="libelleShop"
             [(value)]="selectedlibelleShopoValue"
             ngDefaultControl
             formControlName="libelleShop"
             (selectionChange)="onShopSelectionChanged($event)">
             <mat-option *ngFor="let shop of shopsList"
                          [value]="shop">
                {{shop.storeName}}
            </mat-option>
  </mat-select>

Md data is the following :

shopsList= [
{
    'edoId': '2119',
    'storeName': 'AIX LES BAINS'
  },
  {
    'edoId': '2123',
    'storeName': 'ANNEMASSE'
  },
  {
    'edoId': '2460',
    'storeName': 'ALENCON'
  },
  {
    'edoId': '2478',
    'storeName': 'Grand Evreux Carrefour'
  },
  {
    'edoId': '2632',
    'storeName': 'DESTRELAND'
  }
]

After the first loading , the options apperead in the select dropdown successfully, and I have a button used to force the value of the mat-select when clicked.

I have tried this:

onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = 'ALENCON';
    this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}

Unfortenately it seems that my data is not set.

Any ideas??

In my Angular 7 app I'am using the ponent mat-select of angular material in a reactive form.

The view looks like this :

<mat-form-field class="col-md-3" color="warn">
   <mat-select placeholder="Selectionner la boutique"
             id="libelleShop"
             [(value)]="selectedlibelleShopoValue"
             ngDefaultControl
             formControlName="libelleShop"
             (selectionChange)="onShopSelectionChanged($event)">
             <mat-option *ngFor="let shop of shopsList"
                          [value]="shop">
                {{shop.storeName}}
            </mat-option>
  </mat-select>

Md data is the following :

shopsList= [
{
    'edoId': '2119',
    'storeName': 'AIX LES BAINS'
  },
  {
    'edoId': '2123',
    'storeName': 'ANNEMASSE'
  },
  {
    'edoId': '2460',
    'storeName': 'ALENCON'
  },
  {
    'edoId': '2478',
    'storeName': 'Grand Evreux Carrefour'
  },
  {
    'edoId': '2632',
    'storeName': 'DESTRELAND'
  }
]

After the first loading , the options apperead in the select dropdown successfully, and I have a button used to force the value of the mat-select when clicked.

I have tried this:

onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = 'ALENCON';
    this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}

Unfortenately it seems that my data is not set.

Any ideas??

• javascript
• angular
• angular-material
• angular-material2
• angular-reactive-forms

Share Improve this question Follow edited Sep 14, 2019 at 13:30 Francesco 10.9k88 gold badges7575 silver badges120120 bronze badges asked Mar 18, 2019 at 17:38 firasKoubaafirasKoubaa 6,8772929 gold badges8787 silver badges163163 bronze badges 2

• this.myForm.patchValue({'libelleShop': shopObjToDisplay.storeName });? – GCSDC Commented Mar 19, 2019 at 2:20
• 1 I think it needs to reference one of the objects of your shopList that you have bound to your mat-select. Try: this.myForm.patchValue({'libelleShop': this.shopList[2] }); – Fabian Küng Commented Mar 19, 2019 at 7:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

You need to use the pareWith function on your mat-select input.

Example:

<select [pareWith]="pareFn"  [formControl]="selectedCountriesControl">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

pareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

An old question... you can achieve this with the triggerValue with mat-select and patch value.

<mat-form-field class="full-width" appearance="fill">

                                    <mat-select #level formControlName="level">
                                        <mat-option value="Native Speaker">Native Speaker</mat-option>
                                        <mat-option value="Highly Proficient">Highly Proficient</mat-option>
                                        <mat-option value="Very Good Command">Very Good Command</mat-option>
                                    </mat-select>
                                </mat-form-field>

With the above, you can now get the value in the template.

<div *ngIf="level.triggerValue && (level.triggerValue).length; else notSpecifiedDate" class="text-muted"
                                        fxFlex="100">{{level.triggerValue}}</div>
                                    <ng-template #notSpecifiedDate>
                                        <div class="text-muted" fxFlex="100">
                                            {{'Not Specified' | translate}}
                                        </div>
                                    </ng-template>

Use This:-

    onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = 'ALENCON';
    this.myForm.patchValue({
       libelleShop: shopObjToDisplay 
    });
   }

本文标签： javascriptAngular patchValue of a matselect componentStack Overflow