angular - 带有可重用子组件示例的 Angular 8 反应式表单

Question

我使用 Angular Reactive Forms 和子组件在stackblitz.com上创建了一个解决方案。但是， -在 Input 元素上使用formControlName时出现错误。有人可以提供有关如何使用反应式表单和子组件的示例吗？

问题出在company.component.html中

<input type="text" formControlName="companyName">

标签： angularangular-reactive-formsnested-forms

Answer 1

你使用formControlName不正确。

formControlName是一个 HTML 属性，用于在FormGroup解析模板并附加处理程序时进行解释，它不需要方括号[]。

这种混淆经常出现，因为您使用 Angular 输入标签[formControl]来附加一个独立的FormControl，即[formControl]="myFormControl"

并且您需要将您的 formControlNames 更改为以下格式addresss.component.html：company.component.htmlformControlName="{{formControlName}}"

或者，您可以在这些组件中创建单独的 FormControl public StreetNameFormControl = new FormControl('')，并使用以下格式引用它们：[formControl]="StreetNameFormControl".

编辑：作为旁注，根据经验，以这种方式构建表单通常会导致心痛。这是可能的，但除非您真的需要将表单分解为这些子组件，否则我建议您不要这样做。您可能会遇到的一个问题是稍后填充表单，例如，如果您想重用它们来编辑现有实体。您将不得不编写自定义代码以将值一直传递到您的组件以填充它们。另一方面，如果您将它们作为一个FormGroup，您可以使用方便的方法，例如patchValue。