我试图解决的任务：
创建可重复使用的输入组件包装器，以节省编写表单模板时的时间。
我的意思的例子：
而不必编写以下模板：
<form [formGroup]="myForm">
<mat-form-field>
<input matInput placeholder="Email" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<form>我想写：
<form [formGroup]="myForm">
<my-input-component [form]="myForm" [myFormControl]="email" [myFormControlName]="'email'" [label]="'Email'"></my-input-component>
</form>我的输入组件看起来像：
<mat-form-field [formGroup]="form">
<input
matInput
type="text"
[attr.inputmode]="inputMode"
[placeholder]="label"
[formControlName]="myFormControlName"
/>
<mat-error class="errors" *ngIf="myFormControl.invalid">
<div>{{ getError() }}</div>
</mat-error>
</mat-form-field>这是按原样工作的，但我不知道这是否是将 FormGroup 和 FormControls 作为绑定传递的好方法。
在网上搜索后，我不断遇到NG_CONTROL_VALUE_ACCESSOR，并且有点困惑是否可以或应该在我的场景中使用它。
我不打算让这些组件成为“自定义”，即使用滑块作为表单控件或类似性质的东西，而只是希望“包装器”来节省一些时间。
任何有关该主题的建议或建议将不胜感激！
我一直在使用带有本机元素的 react 钩子表单库，但想切换到使用控制器 API 的自定义组件。
我的自定义输入组件更新 React 状态但未更新表单状态内的 ref 时遇到问题。因此，必填字段始终标记为无效，我无法提交表单。
这是我的问题的演示：https : //codesandbox.io/s/react-hook-form-controller-bofv5
它应该在提交时注销表单数据 - 但提交永远不会发生，因为表单无效。