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，因为模型没有改变。但无论 [ngModel] 绑定如何，它都会发生变化。为什么会发生这种情况，是否有不涉及使用 formControl 而不是 ngModel 的解决方法？

Answer 1

不确定这是否是您要查找的内容，但您可以使用本地模板变量 #select 并将 onChange 方法分配给 select.value 并根据以下内容控制值你的条件。
类似的东西：Stackblitz

Answer 2

您还需要更改“DOM”(*)，看看您如何在函数中传递模板引用变量。在 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查看模型的变化，但是模型没有变化，所以，没办法显示“相同的值”

Angular ngModel 单向绑定

Angular ngModel one-way binding

forms

model-binding

angular