Question

我正在尝试在用户输入时修改输入值。考虑以下简化示例：

app.component.html

<label for="testInput">Enter Text Here: </label>
<input
  id="testInput"
  type="text"
  [ngModel]="inputVal"
  (ngModelChange)="handleChange($event)"
>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputVal: string = '';
  handleChange(newVal) {
    let justDigits = newVal.replace(/[^0-9]/g, '');
    console.log('The new value with just digits: ', justDigits);
    this.inputVal = justDigits;
  }
}

控制台日志清楚地显示handleChange正在运行，并且去除了非数字。但是，表单值不能反映这一点。例如，如果您键入“ 123abc”，则表单值将仅显示该值。控制台日志将显示“ 1”，然后显示“ 12”，然后显示“ 123”四次。

来自很多React，这很奇怪。这是怎么回事？

Answer 1

您的问题是更改检测，如果您输入“ 1a2b3c”，则会在页面本身上看到以下内容：

1 1a 12 12b 123 123c

这是因为如果您输入的内容以字母结尾，inputVal不会改变。

可能的解决方案是触发变更检测。可以按照以下步骤进行操作：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputVal: string = '';

  constructor(private cdr: ChangeDetectorRef) { }

  handleChange(newVal) {
    let justDigits = newVal.replace(/[^0-9]/g, '');
    console.log('The new value with just digits: ', justDigits);
    this.inputVal = null;        // Change the model and trigger a change detection
    this.cdr.detectChanges();
    this.inputVal = justDigits;// Change it again, and let the change detection happen
  }
}

Stackblitz：https://stackblitz.com/edit/angular-l14ehr

Answer 2

对于这种情况，最好是使用pipe。根据您的情况，您可以使用pipe来过滤除数字以外的所有内容。

这里的数字指令只允许数字。

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }

}

这是工作示例-https://stackblitz.com/edit/angular-numbers-only-directive-2qm1cc

修改表单值作为用户类型

2 个答案: