Question

每个兄弟组件内部都有不同的NgForm（模板驱动的表单）。所有这些都由父组件包装。父组件具有验证按钮。我需要在父组件按钮上的click事件中验证某些子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

如果您想使用多种形式进行分组，而不是单独提交，那么可以使用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;
}

Answer 2

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

父组件

  @ViewChild(FirstChidComponent)
  public fChild: FirstChidComponent;

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

您可以访问childComponent的表单值，例如 this.fChild.myForm 。

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

 form.controls[controlName].markAsTouched();

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

2 个答案: