Day12-Angular Material 介紹
Day13-Angular Material: Table
Day14-Angular Material: DatePicker 日期選擇器
Day16-Angular Material: Checkbox
Day17-Angular Material: Dialog 彈出視窗

Angular Material-Select

官方中文網站 - Select

建立普通的 Select

1. imort module

   import { MatSelectModule } from '@angular/material/select';
   import { MatFormFieldModule } from '@angular/material/form-field';
   
   @NgModule({
     imports: [
   	MatSelectModule,
   	MatFormFieldModule, 
     ],
   })
   

2. 設定HTML、TS

   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select>
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   
   <!-- 上方程式碼 就等同於 下方程式碼
   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select>
       <mat-option [value]="steak-0">Steak</mat-option>
       <mat-option [value]="pizza-1">Pizza</mat-option>
       <mat-option [value]="tacos-2">Tacos</mat-option>
     </mat-select>
   </mat-form-field>
   -->
   

   import { Component } from '@angular/core';
   import { FormsModule } from '@angular/forms';
   import { NgFor } from '@angular/common'
   
   interface Food {
     value: string;
     viewValue: string;
   }
   
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent {
     foods: Food[] = [
       {value: 'steak-0', viewValue: 'Steak'},
       {value: 'pizza-1', viewValue: 'Pizza'},
       {value: 'tacos-2', viewValue: 'Tacos'},
     ];
   
   }
   

   

獲取 Select 選取值

1. 透過雙向繫結取得值

   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select [(value)]="selected">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   

   import { Component } from '@angular/core';
   import { FormsModule } from '@angular/forms';
   import { NgFor } from '@angular/common';
   
   interface Food {
     value: string;
     viewValue: string;
   }
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent {
     foods: Food[] = [
       {value: 'steak-0', viewValue: 'Steak'},
       {value: 'pizza-1', viewValue: 'Pizza'},
       {value: 'tacos-2', viewValue: 'Tacos'},
     ];
   	// 剛開始載入本頁時、預設下拉選單為 value='tacos-2' 的選項
   	selected:string = 'tacos-2';
   }
   

2. 透過 FormControl 取得值

   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select formControlName="DropDownList">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   

   import { Component } from '@angular/core';
   import { FormsModule, FormBuilder, FormGroup } from '@angular/forms';
   import { NgFor } from '@angular/common';
   
   interface Food {
     value: string;
     viewValue: string;
   }
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent {
     constructor(
   	private aFormBuilder: FormBuilder
     ){}
     foods: Food[] = [
       {value: 'steak-0', viewValue: 'Steak'},
       {value: 'pizza-1', viewValue: 'Pizza'},
       {value: 'tacos-2', viewValue: 'Tacos'},
     ];
   
     // formControlName="DropDownList" 的元件 預設值 設為 'tacos-2'
     Form: FormGroup = this.aFormBuilder.group({
       DropDownList: ['tacos-2'],
     });
   }
   

當 Select 變動時

1. 想要在選到「Pizza」時、顯示 Input 讓使用者輸入口味，使用 selectionChange

   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select formControlName="DropDownList" (selectionChange)="onDropDownListChange()">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <div [fxShow]="showTextBox1">
   	<mat-form-field>
   	  <input matInput formControlName="TextBox1" type="number">
   	</mat-form-field>
   </div>
   
   <!-- 也可寫成這樣 就不用在新增一個變數showTextBox1
   	<div *ngIf="this.Form.get('DropDownList')?.value==='pizza-1'">
   	</div>
   -->
   

   import { Component } from '@angular/core';
   import { FormsModule } from '@angular/forms';
   import { NgFor } from '@angular/common';
   
   interface Food {
     value: string;
     viewValue: string;
   }
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent {
     constructor(
   	private aFormBuilder: FormBuilder
     ){}
     foods: Food[] = [
       {value: 'steak-0', viewValue: 'Steak'},
       {value: 'pizza-1', viewValue: 'Pizza'},
       {value: 'tacos-2', viewValue: 'Tacos'},
     ];
     Form: FormGroup = this.aFormBuilder.group({
       DropDownList: ['tacos-2'],
   	TextBox1: ['']
     });
     showTextBox1: Boolean = false;
   
     onDropDownListChange(){
   	this.showTextBox1 = true;
     }
   }