@angular/cli项目构建--Dynamic.Form(2)

表单控件服务与动态表单组件

最新推荐文章于 2025-12-02 14:48:32 发布

转载最新推荐文章于 2025-12-02 14:48:32 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Nyan-Workflow-FC/p/8133967.html

文章标签：

#javascript #ViewUI

本文介绍了一个用于处理表单项的Angular服务FormItemControlService，该服务能够将表单项转换为表单组，并详细展示了如何通过动态表单组件实现不同类型的输入控件及其验证逻辑。

form-item-control.service.ts update

@Injectable()
export class FormItemControlService {
  constructor(private formBuilder: FormBuilder) {
  }

  toFormGroup(formItems: FormItemBase<any>[]) {
    const group: any = {};
    formItems.forEach(formItem => {
      group[formItem.key] = formItem.required
        ? [formItem.value || '', Validators.required]
        : [formItem.value || ''];
    });
    return this.formBuilder.group(group);
  }
}

dynamic-form.component update

<div [formGroup]="form">
  <label [attr.for]="formItem.key">{{formItem.label}}</label>
  <div [ngSwitch]="formItem.controlType">

    <input *ngSwitchCase="'textBox'" [formControlName]="formItem.key"
           [id]="formItem.key" [type]="formItem.type" maxlength="{{formItem.maxLength}}">

    <select [id]="formItem.key" *ngSwitchCase="'dropDown'" [formControlName]="formItem.key">
      <option *ngFor="let opt of formItem.options" [value]="opt.key">{{opt.value}}</option>
    </select>

    <div *ngFor="let opt of formItem.radioOptions">
      <input *ngSwitchCase="'radio'" [formControlName]="formItem.key"
             [id]="opt.key" type="radio" [value]="opt.key">
      <label [attr.for]="opt.key">{{opt.value}}</label>
    </div>

    <div *ngFor="let opt of formItem.checkOptions">
      <input *ngSwitchCase="'checkbox'" [formControlName]="formItem.key"
             [id]="opt.key" type="checkbox" [value]="opt.key">
      <label [attr.for]="opt.key">{{opt.value}}</label>
    </div>

  </div>

  <!--<div class="errorMessage" *ngIf="!isValid && form.get(formItem.key).touched">{{formItem.label}} is required</div>-->
  <div class="errorMessage"
       *ngIf="form.get(formItem.key).hasError('required') && form.get(formItem.key).touched">
    {{formItem.label}} is required
  </div>
</div>