Angular 2：包含子组件的表单

Posted 2023-03-13

【中文标题】Angular 2：包含子组件的表单

【英文标题】：Angular 2: Form containing child component

【发布时间】：2017-03-03 12:09:45

【问题描述】：

我有一个组件，它有一个表单和表单内的一些子组件。子组件是使用*ngFor 创建的，每个子组件都包含input 元素。 Angular2 编译器给出了诸如 [formGroup] 未定义之类的错误。

这个实现是否正确？

父组件：

<section class="data-body">
        <form [formGroup]="checkoutForm" novalidate>
            <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>
                <div class="col-md-4">
                    <label>Nominee:</label>
                    <select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="standalone: true">
                        <option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">nominee</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Bank Account:</label>
                    <select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="standalone: true">
                        <option *ngFor="let bank of checkoutData.bankList" [value]="bank">bank</option>
                    </select>
                </div>
            </div>
        </form>
    </section>

子组件：app-checkout-product-view

<div class="row">
    <div class="col-md-4">
        <md-input required [(ngModel)]="product.investmentAmount 
                  formControlName="investmentAmount">
            <span md-prefix>&#x20B9;</span><!--Rupee icon-->
        </md-input>
    </div>
</div>

附： : 所有的导入都很好，所以我很确定这里没有导入错误

【参考方案1】：

这种行为是预期的。在嵌套组件中时，Angular 表单不会自动注册。但是，您可以通过向子组件提供外部 FormGroup 来解决此问题。并且在子组件内将模板包装在同一组内。以下是它的外观：

/外部组件代码 - 它包含表单/

@Component(
  selector: 'my-app',
  template: `
    <form [formGroup]="reactiveFormGroup">
      <input formControlName="foo" />
      <my-comp **[group]="reactiveFormGroup"**></my-comp>
    </form>

    form value:  reactiveFormGroup.value | json 
  `
)
export class AppComponent  
  reactiveFormGroup = new FormGroup(
    foo: new FormControl('default foo'),
    bar: new FormControl('default bar')
  );

/子组件代码，即my-comp/

@Component(
  selector: 'my-comp',
  template: `
    <div [formGroup]="group">
      <input   [formControlName]="'bar'" />
    </div>
  `
)
export class MyComponent  
  @Input() group: FormGroup;

【讨论】：

最近有一篇博客文章也提到了一个例子。你可以在这里找到它：toddmotto.com/component-architecture-reactive-forms-angular

嗨 @DeborahK 是上面 rusev 的答案，仍然是 2019 年 Angular 8 的最佳答案吗？谢谢

嘿@TomBook 我怀疑情况仍然如此，谢谢。在写这篇文章的时候，我已经花了几个月的时间开发基于 Angular 的 UI 库，我不得不说我遇到了很多“角落”案例。那时关于这个主题的帖子并不多，所以当我有时间时，我决定回馈社区。这些天我不再使用 Angular。

嗨@rusev 这些天你用什么来构建新框架？我一直听到“我不再使用 Angular”了，你使用 React 还是 Vue？

主要是 React，但我也尝试使用 Elm 和 Svelte。

【参考方案2】：

您是说导入很好，但您收到的错误表明它们可能不是。

[formGroup] is not defined 错误通常是由声明组件的模块中缺少import ReactiveFormsModule from '@angular/forms' 引起的。

除此之外，您不应在模型驱动表单中使用[(ngModel)]，而应依赖[formGroup] 和formControlName。

【讨论】：

这些是我的导入import FormGroup, FormBuilder, Validators from "@angular/forms";

其次可以在表单中包含子组件吗？

这些是您在组件类中需要的导入。但是该组件必须在模块内声明。在该模块中，您需要将 ReactiveFormsModule 注册为 imports: [] 数组中的导入。

模块级导入也很好，整个事情在表单中没有子组件的其他组件中工作

如果您发布您的 component.ts 和 module.ts 文件，或许我可以提供更多帮助。