关于angular:angular动态表单

前言

我的项目中须要实现一个模块,工作治理,这里的工作是多样的。比如说打疫苗是一个工作,咱们首先建设这个工作,而后在工作中规定几个字段,比如说打疫苗的地点,工夫,接种疫苗品牌等等。关爱老人是另一个工作,工作中也规定几个字段,何时去关爱老人,行为记录等。打疫苗工夫和关爱老人工夫须要用到工夫抉择组件,打疫苗地点个接种疫苗品牌须要用到列表抉择组件,行为记录须要用到文本输出组件。不同的字段须要用到不同的输出组件。

E-R图


一个工作对应多个表单项,一个表单项有一个表单类型。一个工作对应每一个居民生成一个工作详情,一个表单项和一个工作详情独特对应一个表单值。比如说打疫苗这是工作,打疫苗的工夫,打疫苗的地点是表单项,打疫苗的工夫(表单项)对应表单类型是工夫(表单类型),打疫苗的地点(表单项)对应表单类型是单向抉择(表单类型)。打疫苗这个工作对应张三(居民)生成张三打疫苗工作(工作详情),对应李四(居民)生成李四打疫苗工作(工作详情),张三打疫苗工作(工作详情)的打疫苗工夫(表单项)是2022年3月18日(表单值),李四打疫苗工作(工作详情)的打疫苗工夫(表单项)是2022年3月10日(表单值)。

动静表单

对于设置一个工作的多个表单项很简略,无非就是抉择一下表单项的表单类型,表单类型比方文本,工夫,单选,多选等。问题是如何依据表单类型显示不同的输出形式。比方表单类型是工夫就显示一个工夫选择器,表单类型是文本就显示一个输入框。当然咱们能够依据表单类型去进行判断,不同的表单类型显示不同组件,如下图。

然而这意味着如果咱们日后每新增一种表单类型,就要去减少一个if,也就是变动一次代码,这显然不是咱们想要的。
angular有动静表单的性能,帮忙咱们脱离繁冗的if判断(在减少一个新的表单类型时,动静表单也须要改变代码,比方新增一个表单类型对应组件)。
首先咱们须要定义一个指令,这个指令的作用是标记一个地位通知angular把组件插到什么中央。

@Directive({
  selector: '[FormItem]',
})
export class FormDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

而后咱们创立主页面组件v层

<p>form-detial works!</p>
<div class="ad-banner-example">
  <h3>工作详情</h3>
  <ng-template FormItem></ng-template>
</div>

咱们将咱们定义的名叫FormItem指令放入到ng-template标签中,ng-template是一个空白容器,不会有任何的负作用。
主页面c层

export class IndexComponent implements OnInit, OnDestroy {

  formItems: FormItem[] = [];

  @ViewChild(FormDirective, {static: true}) adHost!: FormDirective;
  interval: number|undefined;

  constructor(private formService: FormService) {}

  ngOnInit() {
    this.formItems = this.formService.getFormData();
    this.loadComponent();

  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() {
    for (var i = 0; i < this.formItems.length; i++) {
      const adItem = this.formItems[i];

      const viewContainerRef = this.adHost.viewContainerRef;

      const componentRef = viewContainerRef.createComponent<FormComponent>(adItem.component);
      componentRef.instance.data = adItem.data;
    }
  }
}

初始化时,先通过服务层获取表单项数组,而后循环遍历每一个表单项,最初通过viewContainerRef的createComponent()办法加载表单项类型对应组件。
对于不同的表单类型输出组件,咱们先规定一个公共父类接口。

export interface FormComponent {
  data: any;
}

所有的表单类型输出组件继承这个接口,比如说单选表单类型

@Component({
  selector: 'app-select',
  templateUrl: '
  <p>{{data.text}}</p>
  <select  class="custom-select" id="inputGroupSelect02">
    <option *ngFor="let selection of data.selections" [value]="selection.value">{{selection.name}}</option>
  </select>
    ',
  styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit, FormComponent {

  constructor() { }

  ngOnInit(): void {
  }

  @Input() data: any;
}

文本表单类型

@Component({
  selector: 'app-text',
  templateUrl: '
  <p>{{data.text}}</p>
  <input type="text">
    ',
  styleUrls: ['./text.component.css']
})
export class TextComponent implements OnInit, FormComponent {

  constructor() { }

  ngOnInit(): void {
  }

  @Input() data: any;
}

最终成果

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理