使用嵌套表单进行动态验证

Question

我正在尝试使用动态验证创建嵌套表单。父组件（finalizaNegociacao）包含嵌套表单（dadosTitular）。在嵌套表单上，我有一个复选框（handleType），可以更改某些字段的验证，例如cpf。应该发生的事情是：当我点击复选框时，cpf不再是必需字段。但即使我点击它仍然需要。有人能帮我吗？ 这是代码：

FinalizaNegociacao（父组件），这里的主要逻辑是recebeValidators：

export class FinalizaNegociacaoComponent implements OnInit, OnChanges  {
  public dados:dadosAcordo;
  public formDadosBancarios: FormGroup;
  public submitted: boolean; 
  public events: any[] = []; 
  public servError:any;
  public servSuccess:any;  
  cpf_REGEXP =  /^\d+$/;

  constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaNegociacaoService) {} 

  ngOnInit() {  
    this.formDadosBancarios = this._fb.group({
      id: [''],
      dados_titular: this._fb.array([
        this.initTitular()
      ])
    })      
  }

  initTitular(){
    return this._fb.group({
      titular: ['', [<any>Validators.required, <any>Validators.minLength(3)]],
      cnpj: [''],
      cpf: ['', <any>Validators.required],
      data_nasc: [''],
      agencia: ['', <any>Validators.required ],
      banco: ['', <any>Validators.required],
      conta: ['', <any>Validators.required],
      tipo:  ['', <any>Validators.required],
      pessoa_juridica: ['']
    })
  }

  addTitular(){
    const control = <FormArray> this.formDadosBancarios.controls['dados_titular'];
    control.push(this.initTitular());
  }

  recebeValidators(e:any){
      let array = <FormArray> this.formDadosBancarios.get('dados_titular');
      let cpf = array.at(0).get("cpf");
      let cpfCtrl = this.formDadosBancarios.get(['dados_titular',0,'cpf']);
      let cnpj = array.at(0).get('cnpj');
      let data_nasc = array.at(0).get('data_nasc');
      cpfCtrl = e;
      console.log(cpfCtrl);
  }

DadosTitular，（子组件），这里的主要逻辑是handleType：

export class TitularComponent {
    // we will pass in address from App component
    @Input('group')
    public titularForm: FormGroup;

    @Output() modelChanged = new EventEmitter();
    public formDadosBancarios: FormGroup;
    cpf_REGEXP =  /^\d+$/;

    constructor(private _fb: FormBuilder, private finalizaAcordo:FinalizaNegociacaoService) {} 

    ngOnInit() {  
      this.formDadosBancarios = this._fb.group({
        id: [''],
        dados_titular: this._fb.array([
          this.initTitular()
        ])
      })      
    }

    initTitular(){
        return this._fb.group({
            titular: ['', [<any>Validators.required, <any>Validators.minLength(3)]],
            cnpj: [''],
            cpf: ['', <any>Validators.required],
            data_nasc: [''],
            agencia: ['', <any>Validators.required ],
            banco: ['', <any>Validators.required],
            conta: ['', <any>Validators.required],
            tipo:  ['', <any>Validators.required],
            pessoa_juridica: ['']
        })
    }

    handleType(isJuridica: boolean, i:number, e:any): void {
      let array = <FormArray> this.formDadosBancarios.get('dados_titular');
      let cpf = array.at(0).get("cpf");
      let cnpj = array.at(0).get('cnpj');
      let data_nasc = array.at(0).get('data_nasc');
      const cpfCtrl = this.formDadosBancarios.get(['dados_titular',0,'cpf']);
      const cnpjCtrl = this.formDadosBancarios.get(['dados_titular',0, 'cnpj']);
      const data_nascCtrl = this.formDadosBancarios.get(['dados_titular',0,'data_nasc']);
      const reqValidators: ValidatorFn[] = [Validators.required, Validators.pattern(this.cpf_REGEXP)];
      if (isJuridica) {
        cpfCtrl.setValidators(null);
        data_nascCtrl.setValidators(null);
        cnpjCtrl.setValidators(reqValidators);
        this.modelChanged.emit(cpfCtrl);
      }else{
        cpfCtrl.setValidators(reqValidators);
        data_nascCtrl.setValidators(reqValidators)
        cnpjCtrl.setValidators(null);
        this.modelChanged.emit(cpfCtrl);
      }
      cpfCtrl.updateValueAndValidity();
      data_nascCtrl.updateValueAndValidity();
      cnpjCtrl.updateValueAndValidity();

    }
}

并且有html：

<div formArrayName="dados_titular">
        <div *ngFor="let dados_titular of formDadosBancarios.controls.dados_titular.controls; let i=index">
          <div [formGroupName]="i">
            <titular (modelChanged)="recebeValidators($event)" [group]="formDadosBancarios.controls.dados_titular.controls[i]"></titular>
          </div>
        </div>
      </div>