角度反应形式:将子组件值传递给父组件 [英] angular reactive form: pass child component value to parent component

问题描述

im以角度实现反应形式.我无法将价值从孩子传递给父母.

im implementing reactive-form in angular. im unable to pass value from child to parent.

父表格示例:

<div class="fields-wrap" [formGroup]="parent">
<div class="input-wrap">
  <child-component></child-component>
</div>
<input type"button">Submit</div>
</div>

儿童伴侣表格:

<div class="fields-wrap" [formGroup]="child">
<input type="text" formControlName="firstname" />
<input type="text" formControlName="lastname" />
<input type="text" formControlName="email" />
</div>

当我单击从父组件提交时如何获得这些子值.有人可以帮我吗?

how to get these child value when i click submit from parent component. can anyone help me?

推荐答案

您可以使用viewProviders，而不是将Form作为@Input()传递，而我发现它更易于阅读.

Instead of passing in Form as an @Input() you can use viewProviders which I find it a lot more cleaner to read.

执行此操作非常简单，您只需在子组件打字稿文件中为@Component

To do this is very simple, in your child component typescript file you just need to add one property to your @Component

viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective }]

因此，它们的总输出将如下所示:

So all together it would output like this:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective }]
})

关于stackblitz的示例: https://stackblitz.com/edit/angular-ruxfee

Example on stackblitz: https://stackblitz.com/edit/angular-ruxfee

这篇关于角度反应形式:将子组件值传递给父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！