Question

我正在使用Angular 2上的动态验证创建一个嵌套表单。我有一个父（finalizaNegociacaoComponent），它包含嵌套表单和其他属性，还有组件dadosTitular是嵌套表单。在我的嵌套表单中，我有一个调用函数的复选框，这个函数改变了我表单中的一些输入。我想知道如何让父母finalizaNegociacaoComponent意识到表单上有变化。

这是复选框调用的功能（位于dadosTitularComponent内：

handleType(isJuridica: boolean, i:number): 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);
  }else{
    cpfCtrl.setValidators(reqValidators);
    data_nascCtrl.setValidators(reqValidators)
    cnpjCtrl.setValidators(null);
  }
  cpfCtrl.updateValueAndValidity();
  data_nascCtrl.updateValueAndValidity();
  cnpjCtrl.updateValueAndValidity();
}

所以，这个函数设置和删除某些输入的验证器，问题是finalizaNegociacaoComponent永远不会“意识到它”。我该如何更新？我猜它有一些与ngOnchages有关但我仍然很丢失:(。谢谢

Answer 1

有许多方法可以通知父组件子组件中的更改。例如，在您的子组件dadosTitularComponent中，您可以实现Output参数，以便在模型更改时发出更新的值：

@Output() modelChanged = new EventEmitter();

然后你可以让事件发射器从你的复选框调用的handleType函数中发出一个值：

this.modelChanged.emit(someValue);

someValue将通过输出变量modelChanged发送到父级。

父组件可以使用

监听modelChanged事件

<app-dadosTitularComponent (modelChanged)="someFunction($event)"></app-dadosTitularComponent>

其中someFunction是父级中可以对更改的模型起作用的函数。

希望有所帮助。

ngOnChanges非常适合监视子组件上输入属性的更改，但这是监视从父级发送到子级的更改而不是您想要的更改。您可以在@Input()属性上进行设置，如下所示：

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

通知父母其子女有变化

1 个答案: