如何在Angular 2+中从父组件到达子组件的NgForm

Question

每个内部都有多个具有不同 NgForm（模板驱动表单）的兄弟组件。所有这些都用父组件包装。父组件有验证按钮。我需要在父组件上的按钮上的单击事件中验证某些子 NgForm。

你会提出什么方法来解决这个问题？

// Parent template
<child id="0"></child>
<child id="1"></child>

// Parent component
validateChild(id: number) {
  // need somehow reach child component NgForm with a particular id
}

// Child Component template
<form #myForm="ngForm">...</form>

// Child Component template
@ViewChild('myForm') 
public myForm: NgForm;

当我说验证时 - 我的意思是指以下内容：

Object.keys(form.controls).forEach(key => {
   form.controls[key].markAsTouched();
})

我正在考虑以下方法：

// Parent component
stages = [
  {
    validated: false
  },
  {
    validated: false
  },
]
// Parent component view
<child id="0" [validate]="stages[0].validated"></child>
<child id="1" [validate]="stages[1].validated"></child>

// Child component
@Input()
public set validate(value: boolean) {
  if (value === true)
  Object.keys(this.myForm.controls).forEach(key => {
     this.myForm.controls[key].markAsTouched();
  })
}

但我不太喜欢它..可能有更好的方法。因为这个没有额外的孩子 EventEmitter 我无法检查表单是否有效

Answer 1

我遇到过类似的问题，然后我按照以下方法进行

父组件

  @ViewChild(FirstChidComponent)
  public fChild: FirstChidComponent;

  validateChild(id: number) {
    console.log(this.fChild.myForm);
  }

您可以像 this.fChild.myForm 一样访问childComponent 的表单值。

您也可以对子表单进行验证

 form.controls[controlName].markAsTouched();

Answer 2

如果您希望有多个表单进行分组，而不是单独提交，那么您可以使用FormGroup 来跟踪一组相关的控件。

So you can validate child components like that:

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="reactiveFormGroup">
      <input formControlName="foobar" />
      <my-component **[group]="reactiveFormGroup"**></my-comp>
    </form>

    form value: {{ reactiveFormGroup.value | json }}
  `
})
export class AppComponent { 
  reactiveFormGroup = new FormGroup({
    foo: new FormControl('default foobar'),
    bar: new FormControl('default foobar2')
  });
}

子组件代码，例如my-component

@Component({
  selector: 'my-component',
  template: `
    <div [formGroup]="group">
      <input   [formControlName]="'foobar2'" />
    </div>
  `
})
export class MyComponent { 
  @Input() group: FormGroup;
}