双向数据绑定事件之前的 Angular答案

【问题标题】：Angular before two-way data binding event双向数据绑定事件之前的 Angular
【发布时间】：2018-03-04 00:38:52
【问题描述】：

是否存在在双向数据绑定之前触发的事件。我有这个

<input (change)="updateANN()" [(ngModel)]="annModel.neuronsPerLayer" type="number" [formControl]="numOfNeurons" required>

我想要这样的东西

<input (beforeChange)="myFunction()"  (change)="updateANN()" [(ngModel)]="annModel.neuronsPerLayer" type="number" [formControl]="numOfNeurons" required>

在component.ts中

myFunction():boolean
{
     let ind = true;
     /* ... */
     return ind;
}

如果myFunction返回True继续数据绑定，否则不改变值。

【问题讨论】：

标签： angular two-way-binding

【解决方案1】：

在更改实际发生之前有一个事件，称为(ngModelChanges)="someFunc()"，但完成后，无论如何都会更改值

【讨论】：

【解决方案2】：

是的。您可以使用 keydown 或 keypress 事件，它会在更改之前触发。

(keypress)="myFunction($event)"

myFunction(event) {
  event.preventDefault();
}

一个工作示例：

https://stackblitz.com/edit/angular-gznkiy

【讨论】：

【解决方案3】：

对于条件绑定，最简单的解决方案是使用 getter 和 setter：

<input [(ngModel)]="model['x']" required>

控制器：

model = {
  x_value: null,

  get x() { 
    return this.x_value;
  },

  set x(newValue) { 
    this.x_value = newValue;
    if (condition) {
      this.x_value = default_value;
    }
  },
}

或者只使用 ngModelChange

<input [(ngModel)]="model.x"(ngModelChange)="onChange($event)" required>

控制器：

  onChange(newValue) {
      this.model['x'] = newValue;
      if (!newValue) {
        this.model['x'] = default_value;
      }
    }

【讨论】：