Блог

  DData = {
    pData: [
      {
        unit: "a",
        date: "2020-10-25",
        qty: 0
      },
      {
        unit: "b",
        date: "2020-10-25",
        qty: 0
      }
    ], sData: [
      {
        unit: "c",
        name: "C",
        date: "2020-10-25",
        qty: 4138
      }, {
        unit: "K",
        name: "g",
        date: "2020-10-25",
        qty: 6498
      }
      , {
        unit: "i",
        name: "p",
        date: "2020-10-25",
        qty: 117
      }, {
        unit: "K",
        name: "M",
        date: "2020-10-25",
        qty: 0
      }
    ]
  }
  

выше мой объект, я только что создал formgroup для соответствующего объекта, используя приведенный ниже код

 dDataForm:FormGroup;
const groupP = this.DData.pData.map(p => {
      return new FormGroup({
        unit: new FormControl(p.unit, Validators.required) ,
        date: new FormControl(p.date, Validators.required),
        qty: new FormControl(p.qty,Validators.required)
      })
    })
const groupS = this.DData.sData.map(s => {
      return new FormGroup({
        unit: new FormControl(s.unit, Validators.required),
        name: new FormControl(s.name, Validators.required),
        date: new FormControl(s.date, Validators.required),
        qty: new FormControl(s.qty,Validators.required)
      })
    })

    this.dDataForm = new FormGroup({
      pData: new FormArray(groupP),
      sData: new FormArray(groupS)
    })
  

Я только что преобразовал свой объект (DData) в группу форм (dDataForm), используя приведенный выше код, но я не могу отобразить эту группу форм в моем html. мой HTML-код не работает. Хотя я хочу создать редактируемую таблицу данных.

Я прошу в первый раз, когда я пробовал много раз, ничего не получалось. Любая помощь. Спасибо

 <form [formGroup]='dDataForm'>
    <table>
        <tbody formArrayName='pData'>
            <tr *ngFor="let pro of dDataForm.controls.pData.controls; let ploop = index;">
                <div formGroupName='ploop'>
                    <td> <input type="text" formControlName='unit' [placeholder] = 'ploop.unit'> </td>
                    <td> <input type="text" formControlName='date' [placeholder] = 'ploop.date'> </td>
                    <td> <input type="text" formControlName='qty' [placeholder] = 'ploop.qty'> </td>
                </div>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody formArrayName='sData'>
            <tr *ngFor="let sro of sData.controls; let sloop = index;">
                <div formGroupName='sloop'>
                <td> <input type="text" formControlName='unit' [placeholder] = 'sloop.unit'> </td>
                <td> <input type="text" formControlName='name' [placeholder] = 'sloop.name'> </td>
                <td> <input type="text" formControlName='date' [placeholder] = 'sloop.date'> </td>
                <td> <input type="text" formControlName='qty' [placeholder] = 'sloop.qty'> </td>
                </div>
            </tr>
        </tbody>
    </table>
</form>
  

Я просто просматриваю документы angular formarray https://angular.io/api/forms/FormArray

Вы должны выполнить цикл над FormArray. Вы должны использовать «элементы управления», чтобы получить группу форм из массива форм.