我使用FormGroup
& 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>
答案 0 :(得分:2)
对于唯一的数字输入:
/home/user/Desktop/longdirectorywithsillylengththatyouwouldntnormallyhave
/home/user/Desktop/longdirectorywithsillylengththatyouwouldntnormallyhave/asdasdads9ads9asd9asd89asdh9asd9asdh9asd
/home/user/Desktop/shrtdir/nowthisisalongfile0000000000000000000000000
但是如果你想使用领先的零s,那么就不能使用了。
因此,由于这个问题和其他问题,您需要使用简单的文本输入,并在处理用户输入时编写自定义逻辑。 我建议你使用keyup event。您可以获得输入的当前值,并始终以您希望的方式重塑它。
这样的事情:
<input type="number">
答案 1 :(得分:2)
在这种情况下可以使用指令
Have a look on this sample on stackblitz
<input type="text" formatNumber >
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;
希望这可能会有所帮助
答案 2 :(得分:1)
使用HTML验证器简单易用。
<input type="text" name="usrname" maxlength="10">