kinanson的技術回憶

前言

官網甚少提到關於html的下拉式選單的一些做法，自己因為一些特殊的要求，所以寫篇文章記錄一下。

範例

如何給一個預設值，並且如果沒有選取的話，驗證是不通過的狀態呢?請參考下面的示例

import { Component } from '@angular/core';
import { NgForm } from "@angular/forms/src/directives";


@Component({
  selector: 'app-root',
  template: `
    <form #form1="ngForm" novalidate (submit)="submit(form1)">
    	<select name="modelValue" [(ngModel)]="modelValue" required>
    		<!--預設選項為空值-->
    		<option value="">please select</option>
    		<option *ngFor="let item of list">{{item.value}}</option>
    	</select>
    	<input type="submit" value="submit"/>
    </form>`,
})
export class AppComponent {
  modelValue = ''; //綁定ngModel的部份
  list = [ //下拉選單的值
    { key: 1, value: 'anson' },
    { key: 2, value: 'jacky' },
    { key: 3, value: 'andy' },
  ]
  constructor() {
  }

  submit(form1: NgForm) {
    console.log(form1.valid, form1.value);
  }
}

還有另一個狀況是實務上，常常都是顯示在畫面給user看到的是文字，但真正送回去db的時候，是用key的方式傳回去，不管是新增或是做另外的搜尋功能，那這又得如何做呢

  template: `
    <form #form1="ngForm" novalidate (submit)="submit(form1)">
    	<select name="modelValue" [(ngModel)]="modelValue" required>
    		<!--預設選項為空值-->
    		<option value="">please select</option>
    		<!--只要加上[value]就可以了-->
    		<option *ngFor="let item of list;trackBy:item?.key" [value]="item.key">{{item.value}}</option>
    	</select>
    	<input type="submit" value="submit"/>
    </form>`

假設我想把預設值設定在anson的話呢

import { Component } from '@angular/core';
import { NgForm } from "@angular/forms/src/directives";


@Component({
  selector: 'app-root',
  template: `
    <form #form1="ngForm" novalidate (submit)="submit(form1)">
    	<select name="modelValue" [(ngModel)]="modelValue" required>
    		<!--預設選項為空值-->
    		<option value="">please select</option>
    		<!--只要加上[value]就可以了-->
    		<option *ngFor="let item of list" [value]="item.key">{{item.value}}</option>
    	</select>
    	<input type="submit" value="submit"/>
    </form>`,
})
export class AppComponent {
  modelValue: number; //綁定ngModel的部份
  list = [ //下拉選單的值
    { key: 1, value: 'anson' },
    { key: 2, value: 'jacky' },
    { key: 3, value: 'andy' },
  ]
  title: string;
  constructor() {
    const selectedItem = this.list.filter(x => x.key === 1)[0]; //自己用filter的方式把值選給綁定的變數
    this.modelValue = selectedItem.key; //因為目前綁定的值是key，所以必須為key值哦
  }

  submit(form1: NgForm) {
    console.log(form1.valid, form1.value);
  }
}

結論

簡單紀錄一下關於下拉式選單的實作方式。