Angular：表单验证无效，但输入无论如何都会更新

Question

考虑一个带有这个验证的表单，它在提交时更新，如下所示：

HTML

<div class="form-row">
   <form [formGroup]="myForm" class="col-3" (submit)="onSubmit()">
     <label for="name">Name</label>
     <input class="form-control" formControlName="name" id="name" name="name" />
     <button class="button" type="submit">Save</button>
   </form>
    
Value: {{ myForm.value.name }}
<br />
Is form valid {{ myForm.valid }}
</div>

在ts 文件中：

ngOnInit(): void {
   this.myForm = this.fb.group(
            {
              name: ['', [Validators.required, Validators.pattern(/^[^\d].*/)]],
            },
            { updateOn: 'submit' }
   );
}
    
onSubmit() {
   if (this.myForm.invalid) {
     return;
   } else {
     console.log('Form is Valid');
   }
}

我设置了if 条件来检查表单是否无效并返回。为了实现这一点，如果表单无效，则不允许输入更改值，但它不起作用。即使我输入了不允许输入的内容并点击提交按钮，表单也会变得无效，但值也会更新。

也尝试了onUpdate blur。

Answer 1

验证器不避免你写一个无效的值，只表示无效

您可以订阅 valueChanges 并使用成对的 rxjs 运算符

  this.myForm.get('name').valueChanges.pipe(
    startWith(this.myForm.value.name),
    pairwise()
  )
  .subscribe(([oldValue, newValue]) => {
    if (this.myForm.get('name').invalid) 
        this.myForm.get('name').setValue(oldValue,{emitEvent:false});
  })

Answer 2

我认为您想防止用户输入无效字符。

在这种情况下，模式是不够的，因为你有它，角度正在做验证，这很好。

我建议使用第二个解决方案中解释的指令：https://stackoverflow.com/a/41479077/1133816

在你的情况下，你应该使用你的正则表达式。