Javascript 创建和使用自定义基本体组件（如input，select in Angular）是最佳做法吗

我的应用程序中有很多表单，我觉得我在输入标记和选择标记中复制了太多的代码

 <div class="form-row">
     <label class="col-sm-4 col-form-label required">Pre Shared Key
         <i data-toggle="tooltip" data-placement="bottom" title="Pre shared key for authentication" class="fa fa-info-circle" aria-hidden="true"></i>
     </label>
     <div class="col-sm-8">
         <input class="form-control form-control-sm col-10" placeholder="Key" ShowHidePass type="password" [ngClass]="{'is-valid': form.controls.pre_shared_key.valid && (form.controls.pre_shared_key.touched || form.controls.pre_shared_key.dirty),'is-invalid':form.controls.pre_shared_key.invalid && (form.controls.pre_shared_key.touched || form.controls.pre_shared_key.dirty) }" formControlName="pre_shared_key">
     </div>
 </div>

预共享密钥

特别是切换类以进行验证和工具提示

我相信我可以用像这样的东西

<custom-input formControlName="pre_shared_key" label="Pre Shared Key" placeholder="password" tooltip="some HTML or text"></custom-input>

我创建了一个名为Easy Angular的库。它允许您从表单应用程序中删除大部分锅炉板。这是一个演示crud应用程序和一个演示表单，展示了如何包含引导样式。它是否可以与formcontrol一起使用，而且我在reactiveForms中构建了所有验证，因此使用一个库（我应该在其中再次添加验证）需要花费大量的时间和精力，顺便说一句，感谢您的回答并祝贺您的库，它的所有控件都实现了ControlValueAccessor，因此它与模板和反应式表单都兼容。所有的代码都在GitHub上，因此您可以全面了解如何将控制逻辑封装到易于重用的表单控件中。谢谢您，伙计！还有一个疑问，我只是想知道，对所有基本组件重用这些自定义组件是否是一种良好的做法。它们不是基本组件，基本组件是输入、复选框、选择等。这些控件是复合的，因为它们是标签、控件、验证和可访问性元素。即使它们是复合的，它们也会成为表单构建的原始组件。