填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

SelectControlValueAccessor

ControlValueAccessor 用於寫入 select 控制元件的值,並監聽 select 控制元件的變化。該值訪問器會被 FormControlDirectiveFormControlNameNgModel 指令使用。

The ControlValueAccessor for writing select control values and listening to select control changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

Exported from

選擇器

屬性

屬性說明
@Input()
compareWith: (o1: any, o2: any) => boolean
只寫

追蹤選項的比較演算法,以在檢查變更時追蹤其標識。

Tracks the option comparison algorithm for tracking identities when checking for changes.

說明

在響應式表單中使用 select 控制元件

Using select controls in a reactive form

下面的例子示範瞭如何在響應式表單中使用 select 控制元件。

The following examples show how to use a select control in a reactive form.

      
      import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <select formControlName="state">
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.abbrev }}
        </option>
      </select>
    </form>

     <p>Form value: {{ form.value | json }}</p>
     <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
})
export class ReactiveSelectComp {
  states = [
    {name: 'Arizona', abbrev: 'AZ'},
    {name: 'California', abbrev: 'CA'},
    {name: 'Colorado', abbrev: 'CO'},
    {name: 'New York', abbrev: 'NY'},
    {name: 'Pennsylvania', abbrev: 'PA'},
  ];

  form = new FormGroup({
    state: new FormControl(this.states[3]),
  });
}
    

在範本驅動表單中使用 select 控制元件

Using select controls in a template-driven form

要在範本驅動表單中使用 select,只要把 ngModelname 屬性加到 <select> 標籤上即可。

To use a select in a template-driven form, simply add an ngModel and a name attribute to the main <select> tag.

      
      import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm">
      <select name="state" ngModel>
        <option value="" disabled>Choose a state</option>
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.abbrev }}
        </option>
      </select>
    </form>

     <p>Form value: {{ f.value | json }}</p>
     <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
})
export class SelectControlComp {
  states = [
    {name: 'Arizona', abbrev: 'AZ'},
    {name: 'California', abbrev: 'CA'},
    {name: 'Colorado', abbrev: 'CO'},
    {name: 'New York', abbrev: 'NY'},
    {name: 'Pennsylvania', abbrev: 'PA'},
  ];
}
    

自訂 option 的選擇結果

Customizing option selection

Angular 使用物件標識作為選項。條目標識可能在其實質性資料沒有變化的情況發生變化。比如,如果這些條目是透過 RPC 的方式從伺服器端取到的,當重新執行 RPC 時,就算資料沒有變化,第二個響應也會產生一些具有不同物件標識的物件。

Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response will produce objects with different identities.

要想自訂預設的選項比較演算法,<select> 支援一個名叫 compareWith 的輸入。 compareWith 接受一個函式,它具有兩個引數:option1option2。 如果指定了 compareWith,則 Angular 會根據該函式的返回值來選取一個選項。

To customize the default option comparison algorithm, <select> supports compareWith input. compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

      
      const selectedCountriesControl = new FormControl();
    
      
      <select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

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

注意:我們要監聽 change 事件,這是因為 input 事件不會在 Firefox 和 IE 的 select 元素上觸發: https://bugzilla.mozilla.org/show_bug.cgi?id=1024350 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

Note: We listen to the 'change' event because 'input' events aren't fired for selects in IE, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility