[英]angular reactive form: pass child component value to parent component
im implementing reactive-form in angular.我正在以角度实现反应形式。 im unable to pass value from child to parent.
我无法将值从孩子传递给父母。
example parent form:示例父表单:
<div class="fields-wrap" [formGroup]="parent">
<div class="input-wrap">
<child-component></child-component>
</div>
<input type"button">Submit</div>
</div>
Child componet form:子组件形式:
<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?
谁能帮我?
Instead of passing in Form
as an @Input()
you can use viewProviders
which I find it a lot more cleaner to read. 与其使用
Form
作为@Input()
传递,还可以使用viewProviders
,我发现它更易于阅读。
To do this is very simple, in your child component typescript file you just need to add one property to your @Component
为此非常简单,您只需在子组件打字稿文件中向
@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 }]
})
Example on stackblitz: https://stackblitz.com/edit/angular-ruxfee 关于stackblitz的示例: https ://stackblitz.com/edit/angular-ruxfee
Just define the form in the parent component.ts and pass it to the child with data-binding. 仅在父component.ts定义表单,并将其与数据绑定传递给孩子。 The parent will keep track of the form value.
父级将跟踪表单值。 Example : https://stackblitz.com/edit/formreset?file=src%2Fapp%2Fapp.component.html
示例: https : //stackblitz.com/edit/formreset?file=src%2Fapp%2Fapp.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.