ngModel 没有正确绑定答案

【问题标题】：ngModel is not binding properlyngModel 没有正确绑定
【发布时间】：2019-07-15 07:55:23
【问题描述】：

我正在尝试操作输入中的值，因为我想从中提取超出所需长度的值。

在此示例中，我想保留 3 个字符并提取其余字符。为此，我使用了(ngModelChange) 和[ngModel]。

html

<input type="text"
 [ngModel]="value"
 (ngModelChange)="onChange($event)">

ts

onChange(e: string) {
    if (e.length > 3) {
      this.value= e.substring(0, 3);
      this.input.nativeElement.value = this.value;
    }
  }

它工作一次，但如果我继续更改输入，我可以输入更多字符并且输入值不再更新。 为什么会这样？为什么输入中的value 不再更新？

我使用nativeElement 解决了。但我仍然想知道为什么它不适用于[ngModel]。

我在stackblitz上复制了它

【问题讨论】：

我想你忘了加圆括号 [(ngModel)]="value"
我拆分了 ngModel，因为我只想使用一次 ngModelChange。因为ngModel 是[ngModel]="value" (ngModelChange)="value = $event" 的简化方式。
您希望用户输入值并限制进一步输入吗？查看自定义指令。您可以制定一个指令，让用户输入超过 3 个字符。
这是一个有趣的行为。如果你找到了，请提出解决方案。
为什么不在你的 html 上使用输入限制？ maxLength="X" 可以用来防止用户输入更多内容

标签： angular angular-ngmodel angular-forms

【解决方案1】：

为什么会这样？为什么输入的值不再更新？

我想这与 Angular 更改检测有关，当组件数据发生更改时，应用程序会尝试重新渲染视图以反映该更改。 ngModelChange 是事件发射器，在这种情况下，您尝试在更改检测可以检测和实施更改之前立即更新模型。可以使用setTimeout 作为解决方法：

onChange2(e: string) {
  console.warn('E input-2 : ', e);
  if (e.length > 3) {
    setTimeout(()=> {
      this.valor2 = e.substring(0, 3);
    });
    console.log('here 2', this.valor2);
  }
}

另外，当模型更新时，您需要在模板中使用双向绑定[(ngModel)]="valor2" 来更新视图。这里是stackblitz

【讨论】：

【解决方案2】：

尝试查看您的组件中是否使用了changeDetection: ChangeDetectionStrategy.OnPush。如果是真的，那么使用方法markForCheck(); 来更新你的UI。

例如：

constructor(public cd: ChangeDetectorRef) {}

onChange(e: string) {      
   if (e.length > 3) {
       this.value= e.substring(0, 3);
       this.cd.markForCheck();
   }
}

或尝试检测ngOnInit()中的更改：

ngOnInit() {
  setInterval(() => {
    this.cd.markForCheck();
  }, 3000);
}

【讨论】：

【解决方案3】：

所以我继续在您的代码中更改 2 件事：

[ngModel] 到 [(ngModel)]
添加了(keyup) 绑定

StackBlitz

【讨论】：

我唯一不清楚的部分是 我想保留 3 个字符并提取其余部分。即使在本机元素示例中，您也不能输入超过第 4 个字符。
我的想法是使用 4th 来填充另一个输入。
我喜欢反馈，如果反对者解释反对票，我想知道。
@VictorHenrique 很好，所以我的解决方案为您提供第四个，然后用子字符串替换输入文本。这对你有用吗？
@VictorHenrique 很公平，如果最初的错误行为有原因，我会努力寻找更好的解决方案。

【解决方案4】：

以下如何实现您所需要的......

只有一个 HTML 改变

<input type="text"
 [(ngModel)]="valor2"
 [maxLength]="3"
 >

【讨论】：

【解决方案5】：

您还可以使用响应式表单来访问valueChanges Observable。这将允许您添加有用的运算符，例如 debounceTime 和 distinctUntilChanged，从而提供更丰富的用户体验。

Reactive Forms - valueChanges

【讨论】：