关于angular:angular动态表单

39次阅读

共计 2507 个字符，预计需要花费 7 分钟才能阅读完成。

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

一个工作对应多个表单项，一个表单项有一个表单类型。一个工作对应每一个居民生成一个工作详情，一个表单项和一个工作详情独特对应一个表单值。比如说打疫苗这是工作，打疫苗的工夫，打疫苗的地点是表单项，打疫苗的工夫（表单项）对应表单类型是工夫（表单类型），打疫苗的地点（表单项）对应表单类型是单向抉择（表单类型）。打疫苗这个工作对应张三（居民）生成张三打疫苗工作（工作详情），对应李四（居民）生成李四打疫苗工作（工作详情），张三打疫苗工作（工作详情）的打疫苗工夫（表单项）是 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;}

最终成果

正文完