简介
@ewancoder/angular-forms 是一个用于 Angular 应用程序中管理表单的 npm 包，它基于 Angular 表单模块提供了更容易使用和更灵活的 API。
我们在开发中处理表单操作时会面临各个方面的挑战，如表单校验、表单联动、表单批量操作等等。@ewancoder/angular-forms 提供了开箱即用的表单组件，可以帮助我们更加快速而愉快地完成各种表单操作。
安装
首先，你需要基于 Angular 进行开发。如果你还没有创建 Angular 项目，可以使用 Angular CLI，执行命令 ng new my-app。
安装 @ewancoder/angular-forms：
npm install @ewancoder/angular-forms --save
然后，在需要使用表单的模块中，导入 FormsModule 和 EwanAngularFormsModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------------------- - ---- ---------------------------
-----------
-------- -
------------
----------------------
-
--
------ ----- ----------- - -使用
基本使用
@ewancoder/angular-forms 提供了大量表单组件，其中最基础的是 FormFieldGroupComponent，它可以帮助我们组织表单字段。在组件中建立一个表单组，如下所示：
<ewa-form-field-group [formControlGroup]="formGroup"> <input type="text" ewaFormControlName="name" /> <input type="email" ewaFormControlName="email" /> <button type="button" (click)="submit()">提交</button> </ewa-form-field-group>
在组件中，需要定义表单控件的 FormGroup，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- ----------
--------- -
--------------------- -------------------------------
------ ----------- ------------------------- --
------ ------------ -------------------------- --
------- ------------- ------------------------------
-----------------------
-
--
------ ----- --------------- -
--------- - --- -----------
----- --- --------------- ---------------------
------ --- --------------- --------------------- ------------------
---
-------- -
-- ---------------------- -
-- -------------
-
-
-自定义表单控件
@ewancoder/angular-forms 支持自定义表单控件，我们可以通过实现 EwaFormControl 接口来扩展表单控件。
假设我们需要一个颜色选择器，组件模板如下所示：
<ewa-form-field-group [formControlGroup]="formGroup"> <ewa-color-picker ewaFormControlName="color"></ewa-color-picker> <button type="button" (click)="submit()">提交</button> </ewa-form-field-group>
定义一个 EwaColorPickerComponent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------------
------------
--------- -------------------
--------- -
---- -----------------
---- -------------- --------------------------------------------------
---- -------------- -----------------------------------------------------
---- -------------- -----------------------------------------------------
---- -------------- ----------------------------------------------------
---- -------------- ---------------------------------------------------
---- -------------- -----------------------------------------------------
------
--
---------- -
-
-------- ---------------
------------ -----------------------
-
-
--
------ ----- ----------------------- ------- -------------- -
--------------- -------- ------ -
------ ------------------ --- --- - --- - --------
-
-示例代码
-- -------------------- ---- -------
--------------------- ---------------------------------
-------------
---- ------------------------
---- -------------------------
---- ----------- ------- -- --------------- ----- -- ---
------ ----------- ------------------------ ----------------------- --
------- ------------- ----------------------------------
------
------- ------------- ---------------------------------
------
------ ------------- ------------------------ --
------
-------------
---- ---------------------------
------ ----------- ------------------------- --
------ ----------- --------------------------- --
------
------- ------------- ------------------------------
------------------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- ---------- - ---- -----------------
------ - -------------- - ---- ---------------------------
------------
--------- ----------
--------- -
--------------------- ---------------------------------
-------------
---- ------------------------
---- -------------------------
---- ----------- ------- -- --------------- ----- -- ---
------ ----------- ------------------------ ----------------------- --
------- ------------- ----------------------------------
------
------- ------------- ---------------------------------
------
------ ------------- ------------------------ --
------
-------------
---- ---------------------------
------ ----------- ------------------------- --
------ ----------- --------------------------- --
------
------- ------------- ------------------------------
-----------------------
-
--
------ ----- --------------- -
----------- - --- -----------
----- --- -----------
------ --- -----------
--- --------------- --------------------
---
---- --- --------------- --------------------
---
-------- --- -----------
----- --- --------------- ---------------------
------- --- --------------- --------------------
--
---
--- -------- --------- -
------ ---------------------------------- -- ----------
-
---------- ---- -
------------------- --------------- ----------------------
-
----------------- -------- ---- -
---------------------------
-
-------- -
-- ------------------------ -
-- -------------
-
-
-结论
使用 @ewancoder/angular-forms 可以在 Angular 应用程序中更加轻松地处理各种表单操作，可以大大提高开发效率并减少出错概率。本文详细介绍了如何安装和使用该 npm 包，并提供了使用示例。希望能够帮助到大家！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0981e8991b448d9a7e