如何在角度2中将反应式表单控件从子组件传递到父组件

Question

我有嵌套反应形式，如下所示

父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中抛出错误消息，但是在单击父提交按钮时...

Answer 1

我没有看到您实际上是将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

Answer 2

在角度2中，您必须使用@Input＆amp; amp;创建子元素作为组件。 @Output（作为Emmiter）字段用于与父组件交互。