Angular 嵌套的被动形式始终有效

我使用嵌套的反应式表单作为表单控件

这是演示

问题：即使嵌套无效，主窗体仍然有效（请尝试清除必填字段）

如何向主窗体通知嵌套窗体的有效性更改

主要表单组件：

import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, ControlContainer, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Form</h1>
    <pre>Valid: {{ form.valid }}</pre>
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
      <label>name</label>
      <input formControlName="name">
      <app-address-form formControlName="address"></app-address-form>
      <button>submit</button>
    </form>
    <ng-container *ngIf="submitData">
      <span>submit data</span>
      <pre>{{ submitData }}</pre>
    </ng-container>
  `
})
export class AppComponent  {
  @Input() name: string;
  submitData = '';
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: fb.control('foo bar', Validators.required),
      address: fb.control({
        city: 'baz',
        town: 'qux',
      })
    });
  }

  onSubmit(v: any) {
    this.submitData = JSON.stringify(v, null, 2);
  }
}

<app-address-form (formValidStatus)="formValidStatus($event)" formControlName="address"></app-address-form>

从'@angular/core'导入{Component，Input}；
从'@angular/forms'导入{FormBuilder、FormGroup、ControlContainer、NgForm、Validators}；
@组成部分({
选择器：“我的应用程序”，
模板：`
类型
有效：{form.Valid}
名称
提交
提交数据
{{submitData}}
`
})
导出类AppComponent{
@Input（）名称：string；
提交数据=“”；
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=fb.group({
名称：fb.control（'foo-bar'，需要验证器），
地址：fb.control({
城市：“巴兹”，
城市：“库克斯”，
})
});
}
onSubmit（v:任何）{
this.submitData=JSON.stringify（v，null，2）；
}
}

嵌套表单组件：

import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, ControlContainer, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Form</h1>
    <pre>Valid: {{ form.valid }}</pre>
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
      <label>name</label>
      <input formControlName="name">
      <app-address-form formControlName="address"></app-address-form>
      <button>submit</button>
    </form>
    <ng-container *ngIf="submitData">
      <span>submit data</span>
      <pre>{{ submitData }}</pre>
    </ng-container>
  `
})
export class AppComponent  {
  @Input() name: string;
  submitData = '';
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: fb.control('foo bar', Validators.required),
      address: fb.control({
        city: 'baz',
        town: 'qux',
      })
    });
  }

  onSubmit(v: any) {
    this.submitData = JSON.stringify(v, null, 2);
  }
}

<app-address-form (formValidStatus)="formValidStatus($event)" formControlName="address"></app-address-form>

从'@angular/core'导入{Component，forwardRef}；
从'@angular/forms'导入{ControlContainer，ControlValueAccessor，FormGroup，FormControl，NG_VALUE_ACCESSOR，NgControl，NgForm，Validators}；
// https://docs.google.com/presentation/d/e/2PACX-1vTS20UdnMGqA3ecrv7ww_7CDKQM8VgdH2tbHl94aXgEsYQ2cyjq62ydU3e3ZF_BaQ64kMyQa0INe2oI/pub?slide=id.g293d7d2b9d_1_1532
@组成部分({
选择器：“应用程序地址表单”，
模板：`
城市
镇
`,
供应商：[
{
提供：NG_值访问器，
多：是的，
useExisting:forwardRef（（）=>AddressFormComponent）
}
]
})
导出类AddressFormComponent实现ControlValueAccessor{
form:FormGroup=新FormGroup({
城市：新的FormControl（“”，需要验证器），
城镇：新表单控制（“”，验证器。必填）
});
onTouched:（）=>void=（）=>{}；
writeValue（v:any）{
setValue（v，{emitEvent:false}）；
}
注册变更（fn:（v:any）=>无效）{
本.表格.价值变更.认购（fn）；
}
setDisabledState（已禁用：布尔值）{
禁用？this.form.disable（）：this.form.enable（）；
}
注册表（fn:（）=>无效）{
this.ontoched=fn；
}
}

方法1：（使用事件发射器）

方法2:

constructor(private appc: AppComponent){} 

this.appc.methodname();

constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: fb.control('foo bar', Validators.required),
      address: fb.control({
        city: 'baz',
        town: 'qux',
      })
    });
  }

使用Angular DI在子组件构造函数中注入ParentComponent。您可以在子组件中调用父方法

 constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: fb.control('foo bar', Validators.required),
      address: fb.group({
        city: ['box',Validators.required],
        town: ['qux',Validators.required],
      })
    });
  }

---

将地址控件更改为formGroup，并在其中添加验证

因此，它应该是：

---

发射事件\u从子发射器发射到父发射器。您可以使用setValidators（）更新父窗体验证程序。请提供更多详细信息。下面提供了答案。主窗体不会知道嵌套组件中动态添加的控件。到目前为止还不错。但还是有一个错误。错误：control.registerOnChange不是一个函数

 constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: fb.control('foo bar', Validators.required),
      address: fb.group({
        city: ['box',Validators.required],
        town: ['qux',Validators.required],
      })
    });
  }