Angular 条件表单验证器

Question

我知道网络上有很多关于同一主题的主题，但我无法找到适合我的解决方案。

我有一个用angular的formBuilder制作的表单，它是一个配置文件表单，我们可以在其中更改密码，所以我们输入了三个密码：旧密码，新密码和新密码确认。

这是表格：

this.editProfileForm = this.formBuilder.group({
  lastname: ['', Validators.required],
  firstname: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  phone: [this.phone.replace(/\s/g, ''), [Validators.pattern('[0-9]{10}')]],
  birthdate: ['', [Validators.required]],
  password: [''],
  new_password: [''],
  new_password_confirm: [''],
});
this.editProfileForm.setValidators([this.ageValidator, this.samePasswordValidator, this.requiredPasswordValidator]);

我尝试做的是仅在其中一个不为空时才设置密码字段。如果用户开始输入其中一个密码字段，那么这三个字段都是必需的。

这是我的尝试：

public requiredPasswordValidator(form: FormGroup): any {
  if (form.controls.password.value || form.controls.new_password.value || form.controls.new_password_confirm.value) {

    form.controls.password.setValidators([Validators.required]);
    form.controls.new_password.setValidators([Validators.required, Validators.minLength(6)]);
    form.controls.new_password_confirm.setValidators([Validators.required, Validators.minLength(6)]);
  }
}

这似乎有效，但并不完美，只有当我开始输入并擦除这些字段时才需要这些字段，并且每个字段都是如此。例如，如果我输入密码字段，则不需要 new 和 new_confirm，但如果我在新的 pw 输入中输入一个随机字母并将其删除，则该字段是必需的。

我不知道我的解释是否真的很清楚，如果您需要更多信息，请咨询我。

谢谢。

编辑

我尝试了 Ankur Jain 解决方案，但仍然遇到同样的问题：

这里是函数：

public formControlValueChanged(): void {
    this.editProfileForm.get('password').valueChanges.subscribe(
      (mode: string) => {
        if (mode) {
          this.f.new_password.setValidators([Validators.required]);
          this.f.new_password_confirm.setValidators([Validators.required]);
        }
      });
  }

（我使用 this.f 是因为使用 juste new_password 和 new_password 确认它会引发错误，this.f 是一个返回 editProfileForm.controls 的函数）

我在 ngOninit 中调用它：

  this.formControlValueChanged();

我也尝试将this.editProfileForm.updateValueAndValidity(); 添加到函数中，但这没有任何改变。

Answer 1

据我了解，如果其中一个字段中有某些值，则您希望为所有人设置必需的值，否则，它们不是必需的。因此，让我们检查一下，如果其中一个字段有值，请在表单上设置错误...例如{ allRequired: true }。如果所有控件都有值，则返回null。

passwordsValidator(form: FormGroup): any {
  const ctrls = form.controls;
  if (ctrls.password.value && ctrls.new_password.value && ctrls.new_password_confirm.value) {
    return null;
  } else if (ctrls.password.value || ctrls.new_password.value || ctrls.new_password_confirm.value) {
    return { allRequired: true}
  }
  return null;
}

然后我们可以使用hasError在模板中显示错误：

<p *ngIf="editProfileForm.hasError('allRequired')">Password fields are required!</p>

这是一个StackBlitz

Answer 2

您可以订阅表单的值更改事件。

formControlValueChanged() {
    this.editProfileForm.get('password').valueChanges.subscribe(
       (mode: string) => {
           if(mode){ 
               new_password.setValidators([Validators.required]);
               new_password_confirm.setValidators([Validators.required]);
            }
        });
}

在 ngOnInit 中：

ngOnInit() {
    this.formControlValueChanged();
}

Answer 3

调用setValidators()后尝试这样做：

form.controls.password.updateValueAndValidity();
form.controls.new_password.updateValueAndValidity();
form.controls.new_password_confirm.updateValueAndValidity();

根据文档，updateValueAndValidity：

重新计算控件的值和验证状态。