Angular 2 : 从父组件验证子组件表单字段

Question

问题陈述：

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

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

要求：

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

调查结果：

SO 中有很多帖子有相同的问题陈述，但没有找到任何合适的 solution.All 下面的帖子验证了整个表单，但我的要求是验证子组件中的每个字段。

Angular 2 与子组件一起验证
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;
}

图示：

Angular 2 : 从父组件验证子组件表单字段

Angular 2 : Validate child component form fields from the parent component

javascript

typescript

angular2-forms

angular-validation

angular