Question

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

父表格示例：

<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>

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

Answer 1

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

要执行此操作非常简单，只需在子组件打字稿文件中向@Component添加一个属性即可

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

因此，它们总共将输出如下：

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

关于堆栈闪电的示例：https://stackblitz.com/edit/angular-ruxfee

Answer 2

只需在父component.ts中定义表单，然后通过数据绑定将其传递给子组件。父级将跟踪表单值。范例：https://stackblitz.com/edit/formreset?file=src%2Fapp%2Fapp.component.html

角反应形式：将子组件值传递给父组件

2 个答案: