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

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_34378045

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>