Angular5基于数据库字段配置动态创建带验证的FormArray表单

我来帮你完善这个动态表单的实现，完全基于你提供的数据结构，用FormArray来实现带验证的表单，并且方便后续保存到数据库。

第一步：配置模块 #

首先确保你的模块中导入了ReactiveFormsModule，因为我们要用响应式表单：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他必要模块（比如BrowserModule等）
    ReactiveFormsModule
  ]
})
export class AppModule { }

第二步：组件逻辑实现 #

下面是完整的组件代码，包含表单初始化、验证规则和提交处理：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;
  // 你提供的数据源
  formConfig = [ 
    {type: 'radio', label: '性别', options: 'male,female', required: 'yes' }, 
    {type: 'input', label: '名字', options: '', required: 'yes' }, 
    {type: 'select', label: '国家', options: 'india,pak,sri lanka', required: 'no' } 
  ];

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 初始化表单，包含一个FormArray来存放所有表单项
    this.dynamicForm = this.fb.group({
      formFields: this.fb.array(this.createFormControls())
    });
  }

  // 根据数据源创建对应的FormControl，自动添加必填验证
  private createFormControls() {
    return this.formConfig.map(field => {
      const validators = field.required === 'yes' ? [Validators.required] : [];
      // 初始值为空，后续会绑定到表单控件
      return this.fb.control('', validators);
    });
  }

  // 方便在模板中获取FormArray
  get formFields() {
    return this.dynamicForm.get('formFields') as FormArray;
  }

  // 表单提交处理
  onSubmit() {
    if (this.dynamicForm.valid) {
      // 将表单值映射成适合保存到数据库的结构
      const submitData = this.formConfig.map((field, index) => ({
        label: field.label,
        type: field.type,
        value: this.formFields.at(index).value
      }));
      console.log('准备保存到数据库的数据:', submitData);
      // 这里调用你的API服务，把submitData发送到后端
      // this.yourService.saveFormData(submitData).subscribe(...);
    } else {
      // 标记所有控件为已触碰，触发验证提示
      this.formFields.controls.forEach(control => control.markAsTouched());
    }
  }
}

第三步：模板渲染 #

对应的HTML模板，会根据数据源的type渲染不同的表单控件：

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()" class="dynamic-form">
  <div formArrayName="formFields">
    <!-- 遍历数据源，渲染每个表单项 -->
    <div *ngFor="let field of formConfig; let i = index" class="form-group">
      <label class="form-label">{{ field.label }} 
        <span *ngIf="field.required === 'yes'" class="text-danger">*</span>
      </label>

      <!-- 渲染单选按钮 -->
      <div *ngIf="field.type === 'radio'" class="radio-group">
        <div *ngFor="let option of field.options.split(',')" class="radio-item">
          <input 
            type="radio" 
            [formControlName]="i" 
            [value]="option"
            class="radio-input">
          <span>{{ option === 'male' ? '男' : '女' }}</span> <!-- 可根据需求转成对应文本 -->
        </div>
        <!-- 验证错误提示 -->
        <div *ngIf="formFields.at(i).invalid && formFields.at(i).touched" class="text-danger">
          请选择{{ field.label }}
        </div>
      </div>

      <!-- 渲染文本输入框 -->
      <div *ngIf="field.type === 'input'">
        <input 
          type="text" 
          [formControlName]="i"
          class="form-control"
          placeholder="请输入{{ field.label }}">
        <div *ngIf="formFields.at(i).invalid && formFields.at(i).touched" class="text-danger">
          {{ field.label }}不能为空
        </div>
      </div>

      <!-- 渲染下拉选择框 -->
      <div *ngIf="field.type === 'select'">
        <select [formControlName]="i" class="form-control">
          <option value="">请选择{{ field.label }}</option>
          <option *ngFor="let option of field.options.split(',')" [value]="option">
            {{ option === 'india' ? '印度' : option === 'pak' ? '巴基斯坦' : '斯里兰卡' }}
          </option>
        </select>
        <div *ngIf="formFields.at(i).invalid && formFields.at(i).touched" class="text-danger">
          请选择{{ field.label }}
        </div>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!dynamicForm.valid">保存</button>
</form>

关键说明 #

• FormArray的使用：每个表单项对应FormArray中的一个FormControl，通过formControlName="i"绑定到索引位置，确保数据和控件一一对应。
• 动态验证：根据数据源中的required字段自动添加Validators.required验证规则，提交时会检查表单有效性。
• 数据映射：提交时将表单值和原始数据源的label、type等信息组合成适合保存到数据库的结构，直接传给后端即可。
• 用户体验：添加了验证错误提示，提交前会标记所有控件为已触碰，确保用户能看到未填写的必填项。

内容的提问来源于stack exchange，提问作者NewUser