web-dev-qa-db-ja.com

マット選択でデフォルトオプションを設定

Angularマテリアルプロジェクトに単純な選択オプションフォームフィールドがあります：

component.html

_  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>
_

[(value)]="modeSelect"は、component.tsファイルのmodeSelectプロパティにバインドされています。

ページの読み込み時にデフォルトで_<mat-option value="domain">Domain</mat-option>_が選択されるようにしたいと思います。

_ng-selected_が機能しませんでした

angularangular-material
35
cup_of

Working StackBlitz

ngModelまたはFormsを使用する必要はありません

あなたのhtmlで：

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

コンポーネントで、パブリックプロパティselectedをデフォルトに設定するだけです。

selected = 'domain';

8
Narm

これを試して

<mat-form-field>
    <mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

成分：

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

ライブデモ

また、app.moduleにFormsModuleをインポートすることを忘れないでください

4
Vikas
I was able to set the default value or whatever value using the following:

Template:
          <mat-form-field>
              <mat-label>Holiday Destination</mat-label>
              <mat-select [(ngModel)]="selectedCity" formControlName="cityHoliday">
                <mat-option [value]="nyc">New York</mat-option>
                <mat-option [value]="london">London</mat-option>
                <mat-option [value]="india">Delhi</mat-option>
                <mat-option [value]="Oslo">Oslo</mat-option>
              </mat-select>
          </mat-form-field>

Component:

export class WhateverComponent implements OnInit{

selectedCity: string;    

}

ngOnInit() {
    this.selectedCity = 'london';
} 

}
1
meol

この問題はしばらくの間私を苛立たせました。私は反応フォームを使用していましたが、この方法を使用して修正しました。 PS。 Angular 9およびMaterial 9を使用します。

「ngOnInit」ライフサイクルフック

1）配列またはオブジェクトリテラルからデフォルトとして設定するオブジェクトを取得します

const countryDefault = this.countries.find(c => c.number === '826');

ここでは、国の配列からイギリスのオブジェクトを取得しています。

2）次に、formsbuilderオブジェクト（mat-select）にデフォルト値を設定します。

this.addressForm.get('country').setValue(countryDefault.name);

3）最後に...バインドされた値のプロパティを設定します。私の場合、名前の値が必要です。

<mat-select formControlName="country">
   <mat-option *ngFor="let country of countries" [value]="country.name" >
          {{country.name}}

  </mat-option>
</mat-select>

魅力のように機能します。それが役に立てば幸い

0
Darren Street

ここでNarmの回答に追加したいと思います。彼女の回答の下にコメントと同じものを追加しました。

基本的に、[（value）]に割り当てられる値のデータ型は、mat-optionsに使用される[value]属性のデータ型と一致する必要があります。特に以下のように* ngForを使用してオプションを入力する場合

<mat-form-field fxHide.gt-sm='true'>
        <mat-select [(value)]="heroes[0].id">
          <mat-option *ngFor="let hero of heroes" [value]="hero.id">{{ hero.name }}</mat-option>
        </mat-select>
</mat-form-field>

[（value）] = "heroes [0] .id"を[（value）] = "heroes [0] .name"に変更すると、データ型が一致しないため機能しないことに注意してください。

これらは私の調査結果です。必要に応じて自由に修正してください。

0
Subbu

通常は、テンプレートでFormGroup、Reactive Formsなどを使用してこれを行います。

    this.myForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      isPublished: ['false',Validators.required]
    });
0
Jonathan

これを試して：

<mat-select [(ngModel)]="defaultValue">
export class AppComponent {
  defaultValue = 'domain';
}
0
yer