如何在FormGroup内部动态生成FormControl？

如何解决如何在FormGroup内部动态生成FormControl？

我正在从数据库接收一个对象，该对象包含一些具有以下格式的元素：

info = [{
    idcentro: "8227",namecentro: "Centro Paris",address: "C/ Paris,127",dias: [
      {
        dia: "0",horafinal: "06:00",horainicio: "17:00",salas: [
          {
            id: 0,nombre: "sala 1",intervalos: [
                ["09:00","12:30","10"],["13:00","21:30","20"]
            ]
          }
        ]
      },{
        dia: "1",horafinal: "09:00",horainicio: "16:30","10"]
            ]
          },{
            id: 1,nombre: "sala 2","20:30",{
        dia: "2",horainicio: "20:30",["12:45","18:30","15"]
            ]
          },"20"]
            ]
          }
        ]
      }
    ]
  }];

要使用这些“ dias”数组并包含输入以修改用户需要的每个值，我已经手动创建了一个FormGroup，其中包含这几天的每一天（实际对象最多包含8天）

    this.openingHoursForm = new FormGroup({
      day0OpeningTime: new FormControl(""),day0ClosingTime: new FormControl(""),day1OpeningTime: new FormControl(""),day1ClosingTime: new FormControl(""),day2OpeningTime: new FormControl(""),day2ClosingTime: new FormControl(""),day3OpeningTime: new FormControl(""),day3ClosingTime: new FormControl(""),day4OpeningTime: new FormControl(""),day4ClosingTime: new FormControl(""),day5OpeningTime: new FormControl(""),day5ClosingTime: new FormControl(""),day6OpeningTime: new FormControl(""),day6ClosingTime: new FormControl(""),day7OpeningTime: new FormControl(""),day7ClosingTime: new FormControl(""),day8OpeningTime: new FormControl(""),day8ClosingTime: new FormControl("")
    });

然后，在HTML中，我为每个这些formControlNames创建两个输入：

<div class="dayOpeningHours" title="">
  <div>Day 0</div>
   <div class="opens">
     <label for="">De:
       <input class="form-control" type="time" formControlName="day0OpeningTime" name="day0OpeningTime">
     </label>
   </div>
   <div class="closes">
     <label for="">A:
       <input class="form-control" formControlName="day0ClosingTime" name="day0ClosingTime">
     </label>
   </div>
</div>

如您所见，这变得非常难以维护。我试图通过循环遍历“ dias”数组的每个“ dia”来动态创建标记（在html中）和formControlNames（在ts中），但是我什么都没做。

有没有一种方法可以在同一formGroup中生成HTML和这些表单控件的声明？我一直在阅读有关FormArray和AbstractControl的信息，但我真的不明白如何将其应用于我的代码。

有人可以帮我或者给我一些提示以找到正确的文档吗？

谢谢

解决方法

更好的选择是改用data = np.genfromtxt('data.dat',dtype=None,names=True,delimiter='\t') 。您还可以从FormArray

注入FormBuilder

请参见下文

@angular/forms

下一个任务是创建表单 假设我们有constructor (private fb: FormBuilder) { } diasForm = this.fb.group({ openingHours: this.fb.array([]) }) get openingHours (): FormArray { return this.diasForm.get('openingHours') as FormArray; } 作为数组

dias

为简单起见，我删除了其他属性 在dias = [ { dia: "0",horafinal: "06:00",horainicio: "17:00",},{ dia: "1",... ] 中，我们可以设置表单的值

ngOnInit

在HTML

ngOnInit() {
  this.dias.forEach(dia => {
    this.openingHours.push(
      this.fb.group({
        horafinal: [dia.horafinal,[]],horainicio: [dia.horainicio,[]]
      })
    )
  })
}

以上内容应与我们的formGroup的结构匹配

<form [formGroup]='diasForm'> <div formArrayName='openingHours'> <div *ngFor='let item of openingHours.controls; let i = index' [formGroupName]='i'> <input formControlName='horafinal' /> <input formControlName='horainicio' /> </div> </div> </form>

请参阅this demo on stackblitz

这样，您可以动态地获得天数

,

这是一个大型的复杂对象，但是控制json对象的“方式”始终是相同的：简单的属性是FormControl，数组是FormArrays，我们使用FormGroup对控件进行分组。

因此，请仔细执行四个函数来创建表单

  createForm(data: any = null) {
    data = data || {idcentro: null,namecentro: null,address: null,dias: null};
    return new FormGroup({
      idcentro: new FormControl(data.idcentro),namecentro: new FormControl(data.namecentro),address: new FormControl(data.address),dias: new FormArray(
        data.dias ? data.dias.map(x => this.createFormDias(x)) : []
      )
    });
  }
  createFormDias(data: any = null) {
    data = data || {dia: null,horafinal: null,horainicio: null,salas: null};
    return new FormGroup({
      dia: new FormControl(data.dia),horafinal: new FormControl(data.horafinal),horainicio: new FormControl(data.horainicio),salas: new FormArray(
        data.salas ? data.salas.map(x => this.createFormSalas(x)) : []
      )
    });
  }
createFormSalas(data: any = null) {
    data = data || { id: null,nombre: null,intervalos: null };
    return new FormGroup({
      id: new FormControl(data.id),nombre: new FormControl(data.nombre),intervalos:new FormArray(
        data.intervalos?this.createFormIntervalos(data.intervalos):[])
    });
  }
  createFormIntervalos(data:any=null)
  {
    return data.map(x=>new FormArray(x.map(y=>new FormControl(y))))
  }

还有四个函数来获取formArrays

  get diasArray()
  {
    return this.form.get('dias') as FormArray
  }
  getSalas(index)
  {
    return this.diasArray.at(index).get('salas') as FormArray
  }
  getIntervalos(index1,index2)
  {
    return this.getSalas(index1).at(index2).get('intervalos') as FormArray
  }
  getHoras(index1,index2,index3)
  {
    return this.getIntervalos(index1,index2).at(index3) as FormArray
  }

要在.html中进行控制，您需要考虑FormArray是FormGroups的FormArray，何时是FormControls的FormArray

<form [formGroup]="form">
  <div>idcentro:<input formControlName="idcentro" /></div>
  <div>namecentro:<input formControlName="namecentro" /></div>
  <div>address:<input formControlName="address" /></div>
  <div formArrayName="dias">
    <div
      *ngFor="let grDias of diasArray.controls;let i=index"
      [formGroupName]="i"
    >
      <div>dia:<input formControlName="dia" /></div>
      <div>horafinal:<input formControlName="horafinal" /></div>
      <div>horainicio:<input formControlName="horainicio" /></div>
      <div formArrayName="salas">
        <div
          *ngFor="let grSalas of getSalas(i).controls;let j=index"
          [formGroupName]="j"
        >
          <div>id:<input formControlName="id" /></div>
          <div>nombre:<input formControlName="nombre" /></div>
          <div formArrayName="intervalos">
            <div
              *ngFor="let grIntervalos of getIntervalos(i,j).controls;let k=index"
            >
              <div [formArrayName]="k">
                <div *ngFor="let grHoras of getHoras(i,j,k).controls;let m=index">
                  <input [formControlName]="m">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

ugly stackblitz

请参见我们使用的FormGroup的FormArray

<div formGroupName="nameOfArray">
  <div *ngFor="let group of formArray.controls;let i=index" [formGroupName]="i">
     ..here..
     <input formControlName="controlName">
  </div>
</div>

和一个FormControls的FormGroup

<div formGroupName="nameOfArray">
  <div *ngFor="let group of formArray.controls;let i=index" >
     <input [formControlName]="i">
  </div>
</div>