Angular 2 验证与子组件

Question

在父组件中，我有一个子组件。两者都有其必填字段。最后，仅当两个组件都有效时才需要启用提交按钮（在这种情况下，它们的所有必填字段都已填写）。

我怎样才能做到这一点，尤其是使用模板驱动的验证？

种子代码

父组件

@Component({
    selector: 'parent-comp',
    templateUrl: 'parent.html'
})
export class Parent {

}

<input pInputText name="txt1" id="txt1"
                       required/>

<child-comp></child-comp>

<button pButton type="button" label="Submit"
            [disabled]="IF ONE OF THE COMPS IS NOT VALID"></button>

子组件

@Component({
    selector: 'child-comp',
    templateUrl: 'child.html'
})
export class Child {

}

<input pInputText name="txt2" id="txt2"
                       required/>

Answer 1

为了同时验证父组件和子组件，需要将单个表单拆分为多个组件。

父 html

<form #parentForm="ngForm">
            <input pInputText name="txt1" id="txt1"
                   required/>

      <child-comp></child-comp>

        <button pButton type="button" label="Submit"
        [disabled]="!parentForm.valid"></button>
        </form>

父组件

 import { Component } from '@angular/core';
 @Component({
       selector: 'parent-comp',
        templateUrl: 'parent.html'
})
export class Parent {

}

子表单不能有表单标签

<input pInputText name="txt2" id="txt2"
                   required/>

子组件

import { Component } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'child-comp',
templateUrl: 'child.html',
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
 })
 export class Child {
 }