什么是 @ngx-form/type？
@ngx-form/type 是一个 Angular 表单开发库，它可以让你更轻松地在 Angular 中构建表单。它提供了各种类型的输入字段和表单验证规则，并支持自定义验证器和递归表单。
如何使用 @ngx-form/type
安装 @ngx-form/type
安装 @ngx-form/type 很简单，只需要运行以下命令：
npm install @ngx-form/type --save
引入 @ngx-form/type
在你的 Angular 项目中引入 @ngx-form/type，可以通过以下方式：
import { FormServiceModule } from '@ngx-form/type';使用 @ngx-form/type
@ngx-form/type 提供了许多表单类型和验证规则，这些可以帮助我们快速构建表单。让我们来看一下如何在 Angular 中使用 @ngx-form/type。
创建一个简单的表单
在组件中导入 FormBuilder 和 FormService：
import { FormBuilder } from '@angular/forms';
import { FormService } from '@ngx-form/type';在组件构造函数中注入 FormBuilder 和 FormService：
constructor(
private fb: FormBuilder,
private formService: FormService
) {}在组件中创建表单模型和表单控件：
const formModel = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});在模板中，可以通过 formService 来动态生成表单字段：
<form [formGroup]="formModel">
<ngx-form-input [config]="formService.getConfig('name')" [group]="formModel"></ngx-form-input>
<ngx-form-input [config]="formService.getConfig('email')" [group]="formModel"></ngx-form-input>
<button type="submit">Submit</button>
</form>这里我们使用 ngx-form-input 来表示表单字段，[config] 属性来设置表单配置， [group] 属性指定表单控件所属的表单模型。
在组件中，可以通过以下方式获取表单值：
const formValue = this.formModel.value; console.log(formValue);
使用递归表单
当表单变得更加复杂时，@ngx-form/type 提供了递归表单来更好地组织和维护。
在组件中创建表单模型和表单控件：
-- -------------------- ---- -------
----- --------- - ---------------
----- ---- ---------------------
------ ---- --------------------- -------------------
-------- ---------------
----- ---- ---------------------
------ ---- ---------------------
---- ---- --------------------
--
---可以看到，我们在 address 中又创建了一个表单模型，并且表单模型内部又有 city、state、zip 这三个表单控件。
在模板中，我们可以使用 ngx-form-group 来表示一个递归表单：
<form [formGroup]="formModel">
<ngx-form-input [config]="formService.getConfig('name')" [group]="formModel"></ngx-form-input>
<ngx-form-input [config]="formService.getConfig('email')" [group]="formModel"></ngx-form-input>
<ngx-form-group [config]="formService.getConfig('address')" [group]="formModel"></ngx-form-group>
<button type="submit">Submit</button>
</form>这里我们使用 ngx-form-group 来表示一个递归表单，通过 [config] 属性设置表单配置，[group] 属性指定表单控件所属的表单模型。
在组件中，可以通过以下方式获取表单值：
const formValue = this.formModel.value; console.log(formValue);
总结
@ngx-form/type 提供了大量的表单类型和验证规则，可以帮助我们更方便地构建表单。当表单变得更加复杂时，@ngx-form/type 还提供了递归表单，可以更好地组织和维护表单。
希望这篇教程对你有所帮助！
附上 GitHub 地址：@ngx-form/type
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562db81e8991b448e0430