我有嵌套的反应形式，如下所示
父 HTML
<form>
<child></child>
<button mat-raised-button color="primary">Save</button>
</form>
子 HTML
<div [formGroup]="headerSection">
<input type="text" formControlName="test">
<!span [hidden]="headerSection.get('test').valid">required</span>
</div>
我想在子 HTML 中抛出错误消息，但是当单击父提交按钮时...
【问题讨论】：
标签： angular
我没有看到您实际上是在将 formgroup 传递给您的孩子？所以先这样做，然后我会添加另一个输入，一个布尔值，当表单提交时设置为true。
所以你的父母 ts：
submitted = false;
this.myForm = this.fb.group({
test: ['', Validators.required]
});
子标签：
<child [headerSection]="myForm" [submitted]="submitted"></child>
然后在您的孩子中显示表单并添加何时显示/隐藏验证消息的条件：
@Input() headerSection: FormGroup;
@Input() submitted: boolean;
HTML：
<div [formGroup]="headerSection">
<input type="text" formControlName="test">
<span *ngIf="!headerSection.controls.test.valid && submitted">required</span>
</div>
终于DEMO
【讨论】：
在 Angular 2 中，您必须将子元素创建为具有 @Input 和 @Output（作为 Emmiter）字段的组件，以便与父组件交互。
【讨论】：