Question

我使用FormGroup＆amp; FormControl和输入的1个字段我想限制用户只输入数字，它必须是5位数。我知道如何使用FormControl验证器，但我不需要验证。我希望用户不能输错。我希望用户看到'00000'，然后输入为6，这样用户就会看到'00006'，如果之后输入为9，用户将会看到'00069' 等等。擦除号

的过程相同

login.compenent.ts：

loginForm: FormGroup = new FormGroup({
...
code: new FormControl('00000', Validators.compose(
   [ Validators.maxLengh(5), Validators.minLength(5),Validators.pattern('[0-9]{5}')]
)),
});
...

login.component.html：

<mat-form-field>
    <input type="" matInput placehodler="code" formControlName="code">
<mat-form-field>

Answer 1

对于唯一的数字输入：

/home/user/Desktop/longdirectorywithsillylengththatyouwouldntnormallyhave
/home/user/Desktop/longdirectorywithsillylengththatyouwouldntnormallyhave/asdasdads9ads9asd9asd89asdh9asd9asdh9asd
/home/user/Desktop/shrtdir/nowthisisalongfile0000000000000000000000000

但是如果你想使用领先的零s，那么就不能使用了。

因此，由于这个问题和其他问题，您需要使用简单的文本输入，并在处理用户输入时编写自定义逻辑。我建议你使用keyup event。您可以获得输入的当前值，并始终以您希望的方式重塑它。

这样的事情：

<input type="number">

Answer 2

在这种情况下可以使用指令

Have a look on this sample on stackblitz

<input type="text" formatNumber  >

＆＃13;

import { Directive, ElementRef, HostListener } from '@angular/core'

@Directive({
  selector: '[formatNumber]'
})
export class FormatNumberDirective {
  stringLength = 5;
  constructor(private el: ElementRef) { }


  @HostListener("keyup") onkeydown() {

    let value = this.el.nativeElement.value;
    value = value.split('0').join('');
    if (value.length > 5) {
      this.el.nativeElement.value = this.el.nativeElement.value.substr(0, 5);
      return;
    }

    this.el.nativeElement.value = this.padstring(value, "0", 5)

  }

  padstring(str, padString, length) {
    while (str.length < length)
      str = padString + str;
    return str;
  }
}

＆＃13;

希望这可能会有所帮助

Answer 3

使用HTML验证器简单易用。

<input type="text" name="usrname" maxlength="10">

如何在Angular中限制表单控件的输入

3 个答案: