Angular Form Validation的工作方式与实际工作方式相反

Question

ts文件：

myForm: FormGroup = new FormGroup({
Id: new FormControl("",[Validators.pattern('^.{1,50}$')])
});

addEntry(){
this.finalmsg =[];
let class = '';
let msg = '';
let snackbar = new SnackbarComponent(this.snackbar);
if(this.myForm.controls['Id'].invalid){
msg = 'Enter between 1 to 50';
class = 'redsnackbar';
this.finalmsg.push(msg);
snackbar.openSnackBar(this.finalmsg, "Close", class);
}
this.dialogRef.close("OK")
}

这是我用来验证输入字段的代码。它的工作方式与它应该如何相反。如果我从无效更改为有效，则会显示小吃条。当它无效时，它不会进入对话框的循环。问题出在哪里？

Answer 1

您使用的表达式是导致问题的原因，请将Regex替换为以下内容：

myForm: FormGroup = new FormGroup({
//YOU SHOULD TELL THE `Validators` TO only allow digit from 0 to 50 and no 
//other character should be allowed
Id: new FormControl("",[Validators.pattern('^[1-9]$|^[1-9][0-9]$|^(50)$')])
});

addEntry(){
this.finalmsg =[];
let class = '';
let msg = '';
let snackbar = new SnackbarComponent(this.snackbar);
if(this.myForm.controls['Id'].invalid){
msg = 'Enter between 1 to 50';
class = 'redsnackbar';
this.finalmsg.push(msg);
snackbar.openSnackBar(this.finalmsg, "Close", class);
}
this.dialogRef.close("OK")
}

享受