我如何清除另一个组件上的所有验证器，angular 7 反应形式

Question

我有一个基本上是一个大表单的应用程序。如果用户在一个组件上选择了一个布尔值，则兄弟组件上的表单组应该清除所有验证。

如何实现？

此方法在我们的应用程序上禁用了一个选项卡，当该选项卡被禁用时，它还应该清除该组件上所有表单组的所有验证：

getSkipLogic() {
  this.skipLogicService.getSkipLogic().subscribe(data => {
    (data || []).forEach(item => {

      if (item.toQuestion === 'Q46') {
        const setValue = item.values === 'beforeDate' ? 'Yes' : 'No';
        this.contradictValue.Q46 = setValue;
        this.dependencySectionOne.get('BornBeforeJanuary1996').
          setValue(setValue);
      }
    });
  });
}

Answer 1

您可以通过 html 选择器引用该组件，并在父组件中访问其中的表单。例如，您可以输入

<form-component #fm> </form-component> and then you can refer <button (click) = "fm.myForm.get(key).clearValidators();"> </button>

Answer 2

我假设您的模板结构如下

<parent>
   <child1></child1>   // contains boolean value, which can be used to toggle form on child2 component 
   <child2></child2> // contains form
</parent>

在parent.html

将@Output 参数传递给 child1 组件并在布尔值切换时发出它

<child1 (clearFormInChild2)="clearFormInChild2()"></child1>

child2组件添加引用变量如下

<child2 #child2ref></child2>

在child1.component.ts

import { EventEmitter} from '@angular/core';
Class child2 {
  @Output clearFormInChild2 = new EventEmitter<any>();

  onToggleOfBoolean() {
      this.clearFormInChild2.emit({//optional data});
  }
}

在parent.component.ts

Class ParentComp {
  @ViewChild('child2ref') child2ref: Child2Component;

  clearFormInChild2() {
     this.child2ref.clearForm();
  }
}

在child2.component.ts

clearForm() {
// clear form
}

我如何清除另一个组件上的所有验证器，angular 7 反应形式

How can i clear all validators on another component, angular 7 reactive forms

validation

angular

angular-reactive-forms

formgroups

angular7