如何在有这些限制的情况下验证我的输入字段

Question

所以我试图验证一个有一些限制的字段。我的设置看起来是正确的，但由于某些原因，我没有得到正确的结果。用户可以输入带有或不带有句点("."(和字符之间的单个空格的字母数字字符。以下是HTML的样子：

HTML:

<div class="row">
<label>Address </label>
<input type "text" class="form-control" id="address" addressDirective [whiteSpaceAllowed]="true"> 
</div>

TS:

constructor(fb: FormBuilder) {}
buildForm() {
this.form = this.fb.group({
address: ['', [Validators.pattern('[A-Za-z0-9. ]')]]
});

地址导向.TS

@Directive({
selector: '[addressDirective]'
})
export class AddressDirective {
@Input() 
whiteSpaceAllowed: boolean = false;
private regexWithWhiteSpace = new RegExp(/^[A-Za-z0-9. ]*$/g);
private specialKeys: Array<>string = ['Backspace', 'Tab','End','Home','.'];
constructor(private el: ElementRef) {}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
let current: string = this.el.nativeElement.value;
let next: string = current.concat(event.key);
if (next && !this.whiteSpaceAllowed && !String(next).match(this.regexWithWhiteSpace)) {
event.preventDefault();
}
}
}

当我输入用一个空格分隔的句点的字母数字时，输入会给出无效错误。我该如何解决这个问题？

可接受的输入只能是：

• 带单个空格的字母数字，带或不带""字符
• 句点字符前后不能出现空格

可接受的输入：

"ABC12" //alphanumeric, periods not required
"ABC12. dE4" // single spaced no periods before or after

Answer 1

您的html中有拼写错误。当S应该是whiteSpaceAllowed时，它是小写的。指令中export class处有一个打字错误。在指定onKeyDown的行上，current是一个来自哪里的变量？对我来说，它可以用this.el.nativeElement.value取代current