用空字符串替换更改的字符时未注意到 NgModel 更改答案

【问题标题】：NgModel Change not noticed when replacing changed characters with empty string用空字符串替换更改的字符时未注意到 NgModel 更改
【发布时间】：2017-10-10 06:59:20
【问题描述】：

当用户在输入字段中键入内容时，我希望将除数字之外的所有内容替换为空字符串。不幸的是，该应用程序没有检测到 ngModel 已更改，并且仅在再次输入数字时更新变量balanceAmount。是否有可能告诉 Angular ngModel 已更改并且应该更新？

HTML：

<input [ngModel]="balanceAmount" (ngModelChange)="onBalanceChange($event)" />

打字稿：

onBalanceChange(amount) {
    amount = amount.replace(/[^0-9\.]+/g, '');
    this.balanceAmount = amount;
}

【问题讨论】：

不是 100% 清楚你在问什么，但一个空字符串是 ''，而不是 undefined。此外，您正在执行string 操作，然后尝试与integer 进行比较。即使将您的string 与0 进行比较是有意义的，如果您正在替换非数字，包括- 符号，则该 if 语句永远不会为真，因此该数字不可能为负数。这整个功能是有缺陷和不必要的。
如果您真的试图将用户输入限制为数字，您应该在输入中使用type="number"。唯一需要注意的是这个数字可以是负数，它可能允许e（它代表一个指数）。
我更新了我的问题以明确我的观点。您正在谈论的功能和 if 语句不是我的问题的一部分。
你有什么理由不使用内置的？如果您绝对必须 重新发明轮子，那么我评论的第一部分仍然有效（使用'' 而不是undefined）。顺便说一句，您将函数更改为的 pseudocode 试图证明该函数的其余部分不相关，实际上会起作用，这只会进一步证明您在这里没有提供足够的信息.
How to add form validation pattern in angular2 的可能重复项。如果使用 HTML 输入限制不是一个选项，则使用 pattern 验证器，而不是您自己的自定义函数，它只是评估模式。

标签： angular angular-ngmodel

【解决方案1】：

为了确保用户只输入数字（不允许负值）：

<input type="number" min="0">

就像@Claies 所说，最好使用内置功能，这样您就不要重新发明轮子。

要检测更改，您可以使用DoCheck()。示例：

export class myClass implements OnInit, DoCheck {
    private myModel: any;

    constructor() {
    }

    ngOnInit() {
    }

    ngDoCheck() {
        // Do whatever checks and controls on your model
        console.log('The listener listens to: ' + JSON.stringify(this.myModel));
        if (this.myModel.length > 0 || !this.myModel) {
            // Do something
        }
    }
}

顺便说一下，我在if里面做的控制是完全随机的，只是为了演示。

【讨论】：