Angular ngModel 單向綁定

Question

我有select控件與[ngModel]綁定。 (ngModelChange)處理程序有一個必須丟棄某些值的自定義檢查。 我不能只將[disabled]放在我的輸入上，因為我需要允許用戶嘗試 select 另一個值並在它無效時顯示錯誤。 我有以下組件：

<select [ngModel]="value" (ngModelChange)="onChange($event)">
  <option [ngValue]="1">Test 1</option>
  <option [ngValue]="2">Test 2</option>
</select>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  value = 1;

  onChange(value: number) {
    if (false) { // custom business logic
      this.value = value;
    }
  }
}

我希望當用戶嘗試 select 值 2 時，它將恢復為值 1，因為 model 沒有改變。 但無論 [ngModel] 綁定如何，它都會發生變化。 為什么會發生這種情況，是否有一種解決方法不涉及使用formControl而不是ngModel ？

Answer 1

不確定這是否是您要查找的內容，但您可以使用本地模板變量#select並將onChange方法分配給select.value並根據您的條件控制該值。
類似的東西： Stackblitz

Answer 2

您還需要更改“DOM”(*)，查看如何在 function 中傳遞模板引用變量。在 select 的情況下，您需要更改 selectedIndex（在正常輸入中更改值

<select #select [ngModel]="value" (ngModelChange)="onChange($event,select)">
  <option [ngValue]="1">Test 1</option>
  <option [ngValue]="2">Test 2</option>
</select>

  onChange(value: number,select:HTMLSelectElement) {
    if (window.confirm('¿Are you sure?')) { // custom business logic
      this.value = value;
    }
    else
    {
      select.selectedIndex=this.value==1?0:1
    }
  }

注意：在示例中，“邏輯”是一個簡單的確認，獲取 selectedIndex 的方式有點“硬編碼”。 我想你有一個包含可能值的數組，在數組中找到索引並給出這個索引

(*)Angular 檢查 model 的變化，但 model 沒有變化，因此，無法顯示“相同的值”