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

您可以在子级中创建将发出form.valid值的@Output变量。您需要使用FormBuilder和FormGroup（请勿在此处查看）。

每次更改表单内的内容时，都需要调用一个会发出onchange的函数。

儿童的例子：

@Output onchange: EventEmitter<Boolean> = new EventEmitter(false);
formInChild: FormGroup;

constructor(private fb: FormBuilder) {
  this.formInChild = fb.group(...)
  this.formInChild.valueChanges.subscribe(() => {
    this.onchange.emit(this.form.valid);
  }
}

现在在父母：

（视图）

<child-comp (onchange)="setButtonState($event)"></child-comp>
<button pButton type="button" label="Submit"
            [disabled]="!allvalid"></button>

（组分）

formInParent: FormGroup;
allvalid: boolean = false;

constructor(private fb: FormBuilder) {
  this.formInParent = fb.group(...);
}

setButtonState(formFromChildValid) {
  this.allvalid = this.formInParent.valid && formFromChildValid;
}

在这种情况下，每次以子代码形式更改某些内容时，子代的形式有效状态将被发送到父级，这将更新按钮监听的allvalid变量。

Answer 2

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

父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 {
 }

Angular 2验证与子组件一起使用

2 个答案: