Angular 中的动态列反应形式 [英] Dynamic Columns Reactive Forms in Angular

问题描述

如果我添加单击此处添加运输字段"，例如我想添加司机、联系电话等，我如何添加几列.单击模态后，它会显示有关哪个字段的一些选项加上.请检查我制作的代码链接.下面也是我的代码.请检查这里的图像

检查此链接 https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts

openModal(template: TemplateRef < any >) {this.modalRef = this.modalService.show(template);}初始化组(){let rows = this.addForm.get('rows') as FormArray;行.推(这个.fb.组({描述:[null，Validators.required]，pickup_area: [null, Validators.required],pickup_time: [null, Validators.required],sign_board: [null, Validators.required],驱动程序:[空]，contact_number: [null],运输单位:[空]，special_instructions: [null],}))}

解决方案

这里是编辑过的 stackblitz :https://stackblitz.com/edit/dynamic-columns-reactive-forms-d3xsnf?file=app%2Fapp.component.html>

此链接也包含验证:

https:///stackblitz.com/edit/dynamic-columns-reactive-forms-ytiiqp?file=app/custom-required-validator.ts

How can i add several columns if i add the "click here to add transportation field" like i want to add driver, contact number etc.... Once you click the modal, it will show you some options on what field to add. Please check the code link that I've made. here's also my codes below. Please check also the image here

CHECK THIS LINK https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts

openModal(template: TemplateRef < any > ) {
  this.modalRef = this.modalService.show(template);
}

initGroup() {
  let rows = this.addForm.get('rows') as FormArray;
  rows.push(this.fb.group({
    description: [null, Validators.required],
    pickup_area: [null, Validators.required],
    pickup_time: [null, Validators.required],
    sign_board: [null, Validators.required],
    driver: [null],
    contact_number: [null],
    transportation_unit: [null],
    special_instructions: [null],
  }))
}

解决方案

here is the edited stackblitz : https://stackblitz.com/edit/dynamic-columns-reactive-forms-d3xsnf?file=app%2Fapp.component.html

this link contains validation too :

https://stackblitz.com/edit/dynamic-columns-reactive-forms-ytiiqp?file=app/custom-required-validator.ts

这篇关于Angular 中的动态列反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！