Angular 7 Reactive Forms有条件的“必需”验证

Question

在我开始之前，我不能发布我写的代码，因为它的公司代码包含敏感信息，但我会提供虚拟代码。

我正在使用Angular 7，Reactive Forms，我有一个始终出现在屏幕上的单选按钮。如果选择“是”选项，则会在其下显示另一个单选按钮元素。如果选择“否”，则当前可见时，它不会显示或销毁。 （使用ngIf *）

我想要做的是这样的：

    field: ['', { validators: () => { if (this.isElementShown('blah')) { return Validators.required }}}]

这是“isElementShown”方法：

  isElementShown(id: string) {
    var element = document.getElementById(id);
       if (document.body.contains(element)) {
          return true;
       }
    return false;
  }

我也通过执行以下操作转储页面提交中的所有“无效”字段：

  const invalid = [];
  const controls = this.form.controls;
  for (const name in controls) {
    if (controls[name].invalid) {
      invalid.push(name);
    }
  }
  console.log(invalid);

该字段最初未在页面加载时显示为无效，当我单击“是”并且屏幕上显示第二个单选按钮时，它显示为无效。哪个好，这就是我期望它做的。但是，当我在第一个单选按钮上将选项更改为“no”时，它仍然在控制台中显示为“无效”。即使第二个单选按钮从DOM中被销毁。

有没有人对如何解决这个问题有任何想法？我觉得我几乎都在那里。我现在只是大脑放屁！谢谢。

Answer 1

有条件要求您可以通过@ rxweb / reactive-form-validator的必需验证器来实现。

您只需在所需的验证器中设置条件即可。

 second:['',RxwebValidators.required({conditionalExpression:(x)=> {
return x.first == 'yes'
  }})]

完整的TS代码

this.userFormGroup = this.formBuilder.group({
  first:[''],
  second:['',RxwebValidators.required({conditionalExpression:(x)=> {
return x.first == 'yes'
  }})]
})

我在根模块中注册了'RxReactiveFormsModule'。

检查stackblitz example