Angular 2：验证来自父组件的子组件表单字段

Question

问题陈述：

父组件有<form>标签和一些<input>标签，子组件也有一些<input>标签，父组件有一个<submit>，我们在提交表单时验证表单字段。

如何验证submit表单上父组件的子组件<input>字段？

要求：

如果父组件有一个包含子组件的表单，其模板中有input 组件，那么如果从父组件提交，则这些input 组件应在点击时验证。

调查结果：

SO 中有很多帖子有相同的问题陈述，但没有找到任何合适的解决方案。以下所有帖子都验证了整个表单，但我的要求是验证子组件中的每个字段。

• Angular 2 validation together with the child component
• Allow template-driven form inputs across a component hierarchy to register with a single parent form
• How to check the validity of the child component form within the parent component in Angular 4

Answer 1

我们也可以使用template driven 技术来实现它。在下面找到步骤：

• 从父组件到子组件我们必须传递提交按钮事件。

  <button type="button" (click)="enterForm(parentForm)">Submit</button>
  

  这里，parentForm 是表单引用。

• 使用@ViewChild 装饰器从父组件调用子组件方法以在点击提交时传递submit button event。

  @ViewChild('validateChildComponentForm') private ChildComponent: ChildComponent;
  

• 使用@ViewChild 装饰器将子表单的引用传递给子组件。

  @ViewChild('smartyStreetForm') form;
  
  enterForm(parentForm) {
      this.submitted = true;
      this.ChildComponent.validateChildForm(this.submitted);
      if(!parentForm.valid || !this.childFormValidCheck) {
          return;
      } else {
         // success code comes here.
      }                
  }
  

• 现在在子组件方法中，我们将检查是否提交了父表单并且子组件表单有效，然后将 true 否则 false 发送到父组件。我们将使用@Output 装饰器将isChildFormValid 值发送到父组件中。

  @Output() isChildFormValid: EventEmitter<any> = new EventEmitter<any>();
  
  public validateChildForm(data: any) {
      if (data === true) {
          if(this.form.valid === true) {
              this.isChildFormValid.emit(true);
          } else {
              this.isChildFormValid.emit(false);
          }
      }
  } 
  

• 现在在父组件中，我们将获得 isChildFormValid 值。

  private isChildFormValid(formValid: any) {
      this.childFormValidCheck = formValid;
  }
  

图示：