javascript - 为什么 oninput 事件在 Angular 中的行为与在 JavaScript 中的行为不同？

Question

我正在使用 TypeScript 学习 Angular，与 JavaScript 的一些不一致让我感到困扰。这是一个与纯 JavaScript 完美配合的函数(它以编程方式将 min 和 max 属性设置为输入 - 请不要问我 why I'd want to do that programmatically ):

function change_number(input,min,max) {
  if(input.value > max)
    input.value = max;
  else if(input.value < min)
    input.value = min;
}

<input type='number' oninput='change_number(this,1,5)' placeholder='Enter a number' />

在 Angular 和 TypeScript 中，函数的行为很奇怪:如果我输入 10进入输入字段，它不会重置为 5 , 直到我输入另一个数字，这意味着该值仅读取 之后 input事件(而不是输入-不知道这是否有意义)。更奇怪的是它与 keydown 配合得很好。和 keyup事件。为什么会有这种行为？它是否与 Angular 将事件绑定(bind)到输入的方式相关联？我有一种感觉，理解这将有助于我更好地理解 Angular 与 NgModel 的绑定(bind)机制。
仅供引用，这是我在 Angular 中调用函数的方式(使用 Ionic 框架) - 我使用了绑定(bind) quantity在 [(ngModel)]作为输入的值:

<ion-input type='number' (input)='change_numbers(1,5)' [(ngModel)]='quantity'></ion-input>

Answer 1

Angular 框架的行为完全符合 .是我们有点糊涂。
Angular 处理表单的方式有点不同。有两种方法可以以 Angular 构建表单 -

响应式(Reactive)(同步)

模板驱动(异步)

它们之间的主要区别是上述同步/异步行为 .简单来说，我们可以这么说。

同步 - 在数据更改期间。

异步 - 数据更改后。

X

<ion-input type='number' (input)='change_numbers(1,5)' [(ngModel)]='quantity'></ion-input>

以上是一种模板驱动的方法。这里我们使用[(ngModel)] ，这仅在数据更改后更新。
为了制作 react 输入字段，请使用以下代码:-
在 app.component.ts 文件中

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

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

  form: FormGroup;
  min = 0;
  max = 5;

  constructor(private fb: FormBuilder) {
    this.buildForm();
  }

  buildForm(): void {
    this.form = this.fb.group({
      numberInput: ''
    });

    this.form.get('numberInput').valueChanges.pipe(distinctUntilChanged()).subscribe(_ => {
      if (_) {

        if (_ > this.max) {
          this.form.get('numberInput').setValue(5);
        }
        if (_ < this.min) {
          this.form.get('numberInput').setValue(0);
        }

      } else {
        this.form.get('numberInput').reset('');
      }
    });
  }
}

在 app.html 中(这里我发布了 2 种表达方式。)

  <form [formGroup]="form">
    <!-- <input type='number' [min]='0' [max]='5' formControlName="numberInput" /> we can also this one, more easy just set value dynamically -->
    <input type='number' formControlName="numberInput" />
  </form>

注意:- 不要忘记导入 react 形式模块
更多关于表单的信息可以在官方文档中找到:-https://angular.io/guide/forms-overview