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);
}

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],
  }))
}

解决方案

这是编辑过的stackblitz: 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屋！