Question

如果用户在提交前点击了该字段，我试图动态设置并删除似乎有效的必需的验证器（验证onBlur和onSubmit）。但是，未触及的表单提交不会验证控件。

USECASE ：用户应该能够遍历表单而不会显示必填字段的错误。如果用户输入了一些数据并且该字段有其他验证，则应验证该数据并显示模糊错误。如果用户提交表单而未填写必填字段，则应显示错误。当用户重新聚焦该字段时，错误应该消失。但是，如果用户现在退出该字段而未键入任何内容（空），则应显示所需的错误。

我有一个Plunker 来演示我到目前为止所拥有的内容。

export class App implements OnInit {
name: string;
myform: FormGroup;
email: FormControl;

constructor() {
  this.name = `Angular! v${VERSION.full}`
}

myform: FormGroup;
email: FormControl;

ngOnInit() {
  this.createFormControls();
  this.createForm();
}

  onSubmit() {
 console.log('sumbitted');
  this.email.setValidators([
    Validators.required,
    specialCharValidator]);
this.email.updateValueAndValidity()
}

createFormControls() {
this.email = new FormControl('', {
  updateOn: 'blur', validators: [
    Validators.required,
    specialCharValidator
  ]
  });
}

  createForm() {
this.myform = new FormGroup({
  email: this.email,
});
}

errorAdd(check) {
if (check.target.checked) {
  this.email.setValidators([
    Validators.required,
    specialCharValidator]);
  console.log('on');
} else {
  console.log('off');
  this.email.setValidators([specialCharValidator]);
  this.email.updateValueAndValidity()
  }
}

}

Answer 1

看起来表单正确验证，我只是没有使用信息正确显示错误。更新了plunker：https://plnkr.co/edit/X91VjHmMp1W1LuUdcKy1?p=preview

submitted: boolean;
onSubmit() {
this.submitted = true;
}

并在模板中

*ngIf="alphanumeric.errors && ( submitted || alphanumeric.dirty || alphanumeric.touched)">

Answer 2

我认为你不应该动态添加/删除验证器，更好的方法是根据字段的状态（脏/原始/触摸）打开/关闭错误消息。这样，您可以通过创建自定义规则来控制UI中显示错误的时间。 e.g

this.form.get(field).valid && this.form.get(field).touched

Angular 5 Reactive form：如何在formcontrol上动态添加验证器，并在用户提交表单时显示错误

2 个答案: