Angular 反应式表格模式无效

Question

我在 Angular 上使用 Reactive Form，以便能够同时使用数字和逗号。我制作了输入类型文本，以便点和逗号出现在移动视图的键盘上。我希望输入的内容只接受数字，但我输入的模式没有帮助。这样做之后我仍然可以输入字符，但我不希望这种情况发生。

textInput: new FormControl('', 
[
  Validators.required,
  Validators.pattern('[0-9]{7}')
]),

<input autoComplete="off" autoCorrect="off"
    type="text"
    lang="en"
    [formControl]="this.config.textInput"
    placeholder="0.0"
    minLength={1}
    maxLength={79}
    spellCheck="false"
    (ngModelChange)="amountChanged($event)"
    enterkeyhint="next"
    step="1"
    class="w-100"
>

如何让类型为文本且只接受数字？

Answer 1

您可以使用输入类型：数字 例如：

<input autoComplete="off" autoCorrect="off"
type="number"
lang="en"
[formControl]="this.config.textInput"
placeholder="0.0"
minLength={1}
maxLength={79}
spellCheck="false"
(ngModelChange)="amountChanged($event)"
enterkeyhint="next"
step="1"
class="w-100">

Answer 2

您可以更新以下模式来验证您的输入字段。

  textInput = new FormControl("", [
    Validators.required,
    Validators.pattern("[0-9]*")
  ]);

[0-9]*这可能对你有用。

我已经添加了演示-link 和我的例子下面的截图：

Demo Link

请检查并分享您的反馈。

谢谢。

Answer 3

你可以像这样为它创建指令

@Directive({
  selector: '[only-number]',
})
export class OnlyNumberDirective implements OnInit {
  constructor() {}

  ngOnInit() {}

  @HostListener('input', ['$event'])
  inputEvent(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    input.value = input.value.replace(/[^\d]+/g, '');
  }
}

在模块中声明

 declarations: [AppComponent, OnlyNumberDirective],

使用

<input type="text" only-number />

Demo

Angular 反应式表格模式无效

Angular Reactive Form Pattern not working

typescript

angular

angular-reactive-forms