使用 Ngx-Formly 构建动态 Angular 表单

前端

2024-01-23 02:46:34

简介

动态表单是现代 Web 应用程序中的关键组成部分，它们允许用户根据特定需求灵活地构建表单。在 Angular 生态系统中，ngx-formly 是一个受欢迎的动态表单库，可以帮助开发人员轻松创建和管理复杂的表单。

ngx-formly 的优势

自动表单生成： ngx-formly 根据提供的模型动态生成表单，减少了编写样板代码的需要。
自定义字段扩展： 该库提供了强大的扩展机制，允许开发人员创建自定义字段类型，以满足特定的表单要求。
自定义验证扩展： Ngx-formly 支持自定义验证规则，使开发人员能够创建满足其应用程序特定需求的表单验证。

创建 Ngx-Formly 表单

先决条件

安装 ngx-formly：npm install ngx-formly --save
将 Ngx-Formly 模块导入您的应用程序模块：import { NgxFormlyModule } from 'ngx-formly'

使用 FormlyService 创建表单

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgxFormlyFieldConfig, NgxFormlyService } from 'ngx-formly';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;
  fieldConfig: NgxFormlyFieldConfig[];

  constructor(
    private formBuilder: FormBuilder,
    private formlyService: NgxFormlyService
  ) {}

  ngOnInit(): void {
    this.fieldConfig = [
      {
        key: 'name',
        type: 'input',
        templateOptions: {
          label: 'Name',
          placeholder: 'Enter your name',
          required: true
        },
        validators: {
          validation: Validators.required
        }
      },
      {
        key: 'email',
        type: 'input',
        templateOptions: {
          type: 'email',
          label: 'Email',
          placeholder: 'Enter your email address',
          required: true
        },
        validators: {
          validation: Validators.email
        }
      },
      {
        key: 'skills',
        type: 'multicheckbox',
        templateOptions: {
          label: 'Skills',
          options: [
            { value: 'html', label: 'HTML' },
            { value: 'css', label: 'CSS' },
            { value: 'javascript', label: 'JavaScript' }
          ]
        }
      }
    ];

    this.form = this.formBuilder.group({});
    this.formlyService.addFormFields(this.form, this.fieldConfig);
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

使用 FieldBuilder 创建表单

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FieldArrayType, FormlyBuilder, FormlyFieldConfig } from 'ngx-formly';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;
  fieldConfig: FormlyFieldConfig[];

  constructor(
    private formBuilder: FormBuilder,
    private fieldArrayType: FieldArrayType,
    private fieldBuilder: FormlyBuilder
  ) {}

  ngOnInit(): void {
    this.fieldConfig = this.fieldBuilder.build([
      {
        key: 'name',
        type: 'input',
        templateOptions: {
          label: 'Name',
          placeholder: 'Enter your name',
          required: true
        },
        validators: {
          validation: Validators.required
        }
      },
      {
        key: 'email',
        type: 'input',
        templateOptions: {
          type: 'email',
          label: 'Email',
          placeholder: 'Enter your email address',
          required: true
        },
        validators: {
          validation: Validators.email
        }
      },
      {
        key: 'skills',
        type: 'multicheckbox',
        templateOptions: {
          label: 'Skills',
          options: [
            { value: 'html', label: 'HTML' },
            { value: 'css', label: 'CSS' },
            { value: 'javascript', label: 'JavaScript' }
          ]
        }
      }
    ]);

    this.form = this.formBuilder.group({});
    this.form.addControl('skills', this.fieldArrayType.createField(this.fieldConfig[2]));
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

自定义字段扩展

ngx-formly 允许开发人员创建自定义字段类型以满足特定需求。让我们创建一个新的日期选择器字段类型：

import { Component, OnInit } from '@angular/core';
import { FieldType } from 'ngx-formly';

@Component({
  selector: 'formly-field-datepicker',
  template: `<input type="date" class="form-control" [formControl]="formControl" [formlyAttributes]="field">`,
})
export class DatepickerFieldType implements FieldType {
  defaultOptions = {
    templateOptions: {
      type: 'date'
    }
  };
}

自定义验证扩展

同样，ngx-formly 允许开发人员创建自定义验证器以满足特定需求。让我们创建一个新的 uniqueValue 验证器来确保表单中没有重复值：

import { ValidationMessageOption, ValidatorFn, Validators } from 'ngx-formly';

export function uniqueValueValidator(message?: ValidationMessageOption): ValidatorFn {
  return (control) => {
    const value = control.value;
    const formGroup = control.parent;

    if (!formGroup) {
      return null;
    }

    const fields = formGroup.controls;
    const keys = Object.keys(fields);
    const uniqueValues = new Set();

    for (let i = 0; i < keys.length; i++) {
      const field = fields[keys[i]];
      const fieldValue = field.value;
      if (fieldValue && !uniqueValues.has(fieldValue)) {
        uniqueValues.add(fieldValue);
      } else {
        return { uniqueValue: message || 'This value must be unique' };
      }
    }

    return null;
  };
}