如何在 Angular 中创建带有输入的自定义组件并将其绑定到表单？

Question

假设我们有这样的东西

<form #f="ngForm" (ngSubmit)="onSubmit()">
  <rc-some-component ngModel name="someComponent"></rc-some-component>
  <label for="fname">First name:</label>
  <input ngModel type="text" id="fname" name="fname"><br><br>
</form>

rc-some-component 的组件是：

<div>
 //...some html
<input ngModel name="someComponent" type="file" class="d-none" (change)="onUploadImage()" />
</div>

当我尝试检查 onSubmit 上发送的数据时，我只从 fname 获取数据。这意味着我无法从 rc-some-component 内部的输入获取数据。我该如何尝试解决这样的问题？ 我应该创建类似 ControlValueAccesor 的东西吗？

我只想在调用 onSubmit 时访问输入数据（来自此自定义组件）（这样我就可以在 this.formName.value 中检查它）

Answer 1

您需要实现 ControlValueAccessor 接口，如果您有兴趣添加验证，甚至可能还需要实现 Validator 接口。

我写了一篇关于自定义表单控件的文章，您可以查看。

我还创建了这个 StackBlitz 演示，它正是您所寻找的。

Answer 2

如果您使用 FormGroup 和 FormControls 构建表单，这里是一个解决方案

首先，在您的子组件上，您需要使用

<div [formGroup]="nameOfFG">

打包输入，在您的输入上，您需要设置属性

formControl="nameOfFC'

。

在您的类中，您唯一需要做的就是提供@Input 属性。在这种情况下，您需要

@Input nameOfFG:FormGroup

和

@Input nameOfFC:string

。然后，在父 component.html 中，您需要输入这些值 - 您的

nameOfFG

和

nameOfFC

。表单需要位于 [] 中，因为您将从组件中绑定它。

<custom-component [nameOfFG]="fromGroup" nameOfFC="formControl"></custom-component>

然后，在父类中只需使用您正在使用的 formControl 初始化

ngOnInit()

中的 formgroup。

如果您仍然想反其道而行之，请查看EventEmitter。基本上在子组件上，当输入更改时将调用 EventEmitter，通过

@Output

导出，然后可以使用它来更改父类中的变量 -

<custom-component (event)="changeYourVariable()"></custom-component>