forms - 访问父组件中的 angular ngform 状态

Question

这是父 HTML

<parent-component>
    <child></child>
    <button type="submit" [disabled]="!childForm.valid">
</parent-component>

这是子 HTML

<child>
    <form #childform=ngform>
      <input required type="text">
    </form>
</child>

我需要访问父组件中的子窗体状态

Answer 1

子模板:

<form #childform=ngForm>
  <input required type="text">
</form>

子组件:

export class ChildComponent implements OnInit {

  @Output() validityChange = new EventEmitter<boolean>();
  @ViewChild('childform') form: NgForm;
  private validStatus: boolean;

  ngOnInit() {
    if (!this.form) return;
    this.form.valueChanges
      .subscribe(_ => {
        if(this.validStatus !== this.form.valid) {
          this.validStatus = this.form.valid;
          this.validityChange.emit(this.form.valid);
      });
  }
}

父模板:

<child (validityChange)="childFormValid = $event"></child>
<button type="submit" [disabled]="!childFormValid">

父组件:

export class ChildComponent implements OnInit {

  private childFormValid: boolean;

  ...
}