Angular 动态表单组件库ngx-formly使用说明（一）

使用 Angular 框架开发项目，经常会使用到动态表单，这里介绍一款动态表单组件库ngx-formly如何使用，主要风格样式为ng-zorro-antd。

一、安装依赖

# 安装ng-zorro-antd组件库
npm install ng-zorro-antd --save
# 安装ngx-formly依赖
npm install @ngx-formly/schematics @ngx-formly/ng-zorro-antd @ngx-formly/core --save

二、使用说明

1.为ng-zorro-antd引入样式（两种方式）

A.在 angular.json 中引入了

{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

B.在 style.less 中引入 less 样式文件

@import "~ng-zorro-antd/ng-zorro-antd.less";

若是css，则在 style.css 中引入预构建样式文件

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

2.在app.module引入相关模块，关键是引入FormlyModule和FormlyNgZorroAntdModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  // 需要新增
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';	// 需要新增
import { FormlyModule } from '@ngx-formly/core';	// 需要新增
import { FormlyNgZorroAntdModule } from '@ngx-formly/ng-zorro-antd'; // 需要新增
import { NzButtonModule } from 'ng-zorro-antd/button';	// 引入需要用到的ng-zorro-antd组件模块
import { NzFormModule } from 'ng-zorro-antd/form';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    FormlyModule,
    FormlyNgZorroAntdModule,
    BrowserAnimationsModule,
    NzButtonModule,
    NzFormModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

3.在模板文件添加<formly-form>组件容器，并在对应的逻辑文件使用数据构建表单

  <!--app.component.html-->
  <form nz-form [nzLayout]="'vertical'" [formGroup]="form" (ngSubmit)="onSubmit()">
    <formly-form
      [form]="form"
      [model]="model"
      [fields]="fields">
    </formly-form>
    <button nz-button nzType="primary" type="submit">提交</button>
    <button nz-button nzType="danger" type="reset">重置</button>
  </form>

该<formly-form>组件是表单的主要容器，它将构建和呈现表单字段

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  form = new FormGroup({});
  model: any = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: '姓名',
        placeholder: '请输入姓名',
        required: true,
      }
    },
    {
      key: 'hobby',
      type: 'select',
      templateOptions: {
        label: '爱好',
        placeholder: '请选择爱好',
        required: true,
        options: [
          { label: '打篮球', value: 1 },
          { label: '玩游戏', value: 2 },
          { label: '旅游', value: 3 },
        ]
      }
    },
  ];
}

效果图：

三、配置项说明

<formly-form>组件接收参数form、fields、model、options

名称	类型	默认值	必须	说明
form	FormGroup/FormArray	new FormGroup({})	否	允许跟踪模型值和验证状态的表单实例
fields	FormlyFieldConfig[]		是	用于构建表单的字段配置
model	any		是	表单的模型
options	FormlyFormOptions		否	表单选项

FormlyFieldConfig配置项说明

属性	类型	说明
key	string	表单控件的key，会将字段值链接到模型
id	string	表单控件id属性
name	string	表单控件的name属性
type	string	表单控件类型
className	string	表单控件样式类名
templateOptions	object	表单控件特定配置
template	string	呈现自定义html内容
defaultValue	any	表单控件默认值
hide	boolean	是否隐藏，默认为false
hideExpression	boolean/string/function	根据来自其他字段的值有条件地隐藏
expressionProperties	boolean/string/function	一个对象，其中键是要在主字段配置上设置的属性，值是用于分配该属性的表达式
focus	boolean	是否聚焦，默认为false
wrappers	string[]	它应该是包装器的名称。Formly 字段模板将由第一个包装器包装，然后是第二个包装器，然后是第三个包装器，依此类推。您也可以将它们指定为类型的一部分
parsers	function[]	每当模型更新时，作为管道执行的函数数组，通常用于格式化用户输入
fieldGroup	FormlyFieldConfig[]	字段组是一种将字段组合在一起的方法，使高级布局变得非常简单。如嵌套表单
fieldArray	FormlyFieldConfig
fieldGroupClassName	string	指定将应用于formly-group组件的您自己的类
validation	object	具有一些有用属性的对象：消息、显示
validators	any	表单验证器。用于为特定字段设置验证规则。应该是键值对的对象。该值可以是要计算的表达式或要运行的函数。每个都应该返回一个布尔值，当字段有效时返回 true
asyncValidators	any	将此用于需要异步验证的任何内容。返回一个Promise对象
formControl	AbstractControl	这是该字段的FormControl。它为您提供更多控制，例如运行验证器、计算状态和重置状态
modelOptions	object	控制模型的变化：debounce，updateOn

---

options配置说明

options中的formState属性会被传递到所有字段，是一种用于在字段之间进行通信的机制（不必弄乱模型）
options中的resetModel，updateInitialValue方法，它们将分别调用所有字段的 resetModel 和 updateInitialValue，允许你在处理或验证字段之前修改/转换字段。

参考文献：

ngx-formly 使用文档
ngx-formly git地址
ng-zorro-antd 使用文档