在开发 Web 应用程序时，表单是不可缺少的组成部分。而 Angular 框架为我们提供了丰富的组件库，包括内置的表单组件。但在实际应用中，我们经常需要使用自定义表单组件，以满足业务需求和更好的用户体验。
本文将介绍 Angular 中如何自定义表单组件，包括如何创建并注册组件、如何与模板表单进行双向数据绑定等。
创建表单组件
我们可以使用以下命令在 Angular 项目中创建一个自定义组件：
ng generate component my-form
生成的组件目录结构如下：
my-form/ my-form.component.ts my-form.component.html my-form.component.scss my-form.component.spec.ts
接着在 my-form.component.ts 文件中编写组件类：
-- -------------------- ---- -------
------ - ---------- ------------- ------ ------ - ---- ----------------
------------
--------- --------------
------------ ---------------------------
---------- -----------------------------
--
------ ----- --------------- -
-------- --------- ----
--------- -------------- - --- --------------------
-------------------- ------ -
----- - ----- ----- - - ------------ -- -----------------
------------- - -
-----------------
------- ------
--
----------------------------------------
-
-在组件类中，我们将输入和输出属性添加到组件中：
@Input() formData: any;：接收父组件传递的表单数据；@Output() formDataChange = new EventEmitter<any>();：向父组件传递更新后的表单数据。
在 onInputChange() 方法中，我们根据输入元素的名称和值更新表单数据，并通过 formDataChange 事件向父组件通知数据更新。
接着在 my-form.component.html 文件中编写组件模板：
-- -------------------- ---- -------
------
-----
------ ----------------------
------ ----------- --------- ----------- ------------------------ --------------------------------
------
-----
------ ------------------------
------- ----------- ------------- -------------------------- ---------------------------------
------- ---------------------
------- -----------------------
------- -------------------------
---------
------
-------在组件模板中，我们使用数据绑定指令将表单元素的值绑定到输入属性上，并使用事件绑定指令绑定元素的输入事件或选择事件到 onInputChange() 方法上。
注册表单组件
接着我们需要将自定义的表单组件注册到父组件中。首先，我们需要在父组件的模块中导入组件：
import { MyFormComponent } from './my-form/my-form.component';接着在 @NgModule 装饰器中的 declarations 数组中添加组件类：
@NgModule({
declarations: [
AppComponent,
MyFormComponent,
],
// ...省略其它配置
})
export class AppModule { }最后，在父组件中使用自定义表单组件：
<app-my-form [formData]="formData" (formDataChange)="onFormDataChange($event)"></app-my-form>
我们通过输入属性 formData 将表单数据传递给自定义组件，并通过 formDataChange 事件监听表单数据的变化。
双向数据绑定
在上述示例中，我们通过输入和输出属性实现了自定义表单组件与父组件之间的单向数据绑定。而在实际应用中，我们经常需要双向数据绑定，即自定义表单组件能够响应父组件的变化，并影响父组件的状态。
我们可以使用 ngModel 指令实现双向数据绑定。首先在 my-form.component.ts 文件中引入 NgModel directive：
-- -------------------- ---- -------
------ - ---------- ------------- ------ ------ - ---- ----------------
------ - ------- - ---- -----------------
------------
--------- --------------
------------ ---------------------------
---------- -----------------------------
--
------ ----- --------------- -
-------- --------- ----
--------- -------------- - --- --------------------
------------------ -------- -------- --
--------------- -
----------------------------------------
-
-在组件中，我们创建 ngModel 的实例，并在构造函数中注入。接着我们在 my-form.component.html 文件中使用 ngModel 指令实现双向数据绑定：
-- -------------------- ---- -------
------
-----
------ ----------------------
------ ----------- --------- ----------- -------------------------- ----------------------------------
------
-----
------ ------------------------
------- ----------- ------------- ---------------------------- ----------------------------------
------- ---------------------
------- -----------------------
------- -------------------------
---------
------
-------在输入元素中，我们使用 ngModel 指令实现双向数据绑定，即将元素的值绑定到表单数据上，并通过 (ngModelChange) 事件监听表单数据的变化。
在父组件中使用自定义表单组件时，我们可以像内置的表单组件一样使用 ngModel 指令实现双向数据绑定：
<app-my-form [(ngModel)]="formData"></app-my-form>
在使用时，我们将表单数据与 ngModel 指令进行双向绑定。
总结
本文介绍了 Angular 中如何自定义表单组件，并详细讲解了组件的创建、注册和数据绑定等。当我们需要定制化的表单组件时，可以使用本文中的方法进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455ce32968c7c53b092f40b