具有可重用子组件示例的Angular 8反应形式

Question

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

问题在 company.component.html

中

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

Answer 1

您使用的 Traceback (most recent call last): File "run.py", line 155, in <module> res = runCap() File "run.py", line 123, in runCap with sr.AudioFile('./audio.wav') as source: File "/usr/local/lib/python2.7/dist-packages/speech_recognition/__init__.py", line 203, in __enter__ self.audio_reader = wave.open(self.filename_or_fileobject, "rb") File "/usr/lib/python2.7/wave.py", line 511, in open return Wave_read(f) File "/usr/lib/python2.7/wave.py", line 160, in __init__ f = __builtin__.open(f, 'rb') IOError: [Errno 2] No such file or directory: './audio.wav' 错误。

formControlName是formControlName的HTML属性，它可以在解析模板并附加处理程序时进行解释，不需要方括号FormGroup。

这种混乱通常是由于您使用Angular输入标签[]来附加独立 FormControl，即[formControl]

在[formControl]="myFormControl"和addresss.component.html中，您需要将formControlNames更改为以下格式：company.component.html

或者，您可以在这些组件中创建单个FormControls formControlName="{{formControlName}}"，并使用诸如public StreetNameFormControl = new FormControl('')之类的格式引用它们。

编辑：作为一个附带说明，根据经验，以这种方式构建表格通常会导致心痛。可以，但是除非您真的需要将表单分解为这些子组件，否则建议不要这样做。您可能会遇到的一个问题是稍后填充表单，例如，如果您想重用它们来编辑现有实体，则可能会遇到问题。您将必须编写自定义代码，以将值一直传递到组件中以填充它们。另一方面，如果将它们作为一个[formControl]="StreetNameFormControl"，则可以使用诸如FormGroup之类的便捷方法。