Question

在开始之前，我无法发布自己编写的带有敏感信息的代码，因为它是公司代码，但是我将提供虚拟代码。

我正在使用Angular 7，反应形式，我的单选按钮始终显示在屏幕上。如果选择选项“是”，则在其下方显示另一个单选按钮元素。如果选择“否”，则它在当前可见时不会显示或销毁。（使用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”时，它仍在控制台中显示为“ invalid”。即使第二个单选按钮已从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

Angular 7反应形式有条件的“必需”验证

1 个答案: