如何使用 Angular 中的输入创建自定义组件并将其绑定到表单？
假设我们有这样的东西
<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 中检查它）
Lets say we have something like this
<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>
And the component for rc-some-component is:
<div>
//...some html
<input ngModel name="someComponent" type="file" class="d-none" (change)="onUploadImage()" />
</div>
When I try to check the data which is sent on onSubmit I only get the data from fname. That means I cannot get data from an input which is inside rc-some-component. How can I try to solve such an issue?
Should I create something like ControlValueAccesor?
I only want to have an access to the input data (from this custom component) while invoking onSubmit (so then I am able to check it in this.formName.value)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要实现 ControlValueAccessor 接口，如果您有兴趣添加验证，甚至可能还需要实现 Validator 接口。
我写了一篇文章关于自定义表单控件你可以检查一下。
我还创建了这个 StackBlitz 演示，它正是您所寻找的。
You need to implement the ControlValueAccessor interface, and maybe even the Validator interface if you are interested in adding validations.
I wrote an article about custom form controls you can check.
I also created this StackBlitz demo that does exactly what you are looking for.
如果您要在子组件上使用 FormGroup 和 FormControls 首先构建表单，则这里是一个解决方案，
您需要使用
打包输入，在您的输入上需要设置属性formControl="nameOfFC'。在您的类中，您唯一需要做的就是提供 @Input 属性。在这种情况下，您需要
@Input nameOfFG:FormGroup 和@Input nameOfFC:string然后，在父 component.html 中，您需要输入这些值 - 您的nameOfFG和nameOfFC表单需要。位于 [] 中，因为您将从组件中绑定它然后，在父类只是初始化
ngOnInit()中的 formgroup 与您正在使用的 formControl如果您仍然想采用相反的方式，请查看 EventEmitter。 基本上在子组件上，当输入更改时将调用 EventEmitter，这是通过导出的。
@Output，然后可用于更改父类中的变量 -Here is a solution if you are building a form with FormGroup and FormControls
First on your child component you need to pack the input with
<div [formGroup]="nameOfFG">, on your input you need to set attributeformControl="nameOfFC'.In your Class the only thing you need to do is provide @Input attributes. In this case, you need to
@Input nameOfFG:FormGroupand@Input nameOfFC:string. Then, in parent component.html you need to input these values - yournameOfFGandnameOfFC. The form needs to be in [], because you will bind it from your component.<custom-component [nameOfFG]="fromGroup" nameOfFC="formControl"></custom-component>Then, in parent Class just initialize formgroup in
ngOnInit()with the formControl you are using.If you still want to go the other way around, look at EventEmitter. Basically on childcomponent, EventEmitter will be called when input changes, that is exported through
@Output, which can be then used to change your variable in your parent class -<custom-component (event)="changeYourVariable()"></custom-component>