Dynamisches Hinzufügen von Formularfeldern mit Angular formArray

Ich habe einige Formularfelder und möchte dynamisch weitere Felder hinzufügen, die aus einer anderen Ansicht stammen (wo der Benutzer den Formularfeldtyp, die Länge und den Namen eingeben kann). Ich muss Formularfelder mit diesen Werten erstellen.

Einige, wie ich es geschafft habe, ein Feld zu konstruieren (Textfeldname ist „eins“), aber wenn ich versuche, ein weiteres Feld hinzuzufügen (Textfeldname ist „zwei“), erhalte ich die folgende Fehlermeldung:
ERROR Error: Cannot find control with path: 'newfields -> 0 -> two'

issuecomponent.html


<form [formGroup]="issuerTestCaseFrm">
               <div>
                   <label for="inputName3">Issuer Reference Number: </label>
                   <input name="lcid" formControlName="IssuerReferenceNumber" required type="tel" class="form-control">
               </div>
                   <div formArrayName="newfields">
                   <div [formGroupName]="i" *ngFor="let tech of issuerTestCaseFrm.controls.newfields.controls; let i = index">
                   <div *ngFor="let prop of fieldProps">
                               <label class="col-sm-2 control-label">{{fields[prop].label}}</label>
                               <div [ngSwitch]="fields[prop].type">
                                   <input *ngSwitchCase="'text'" [formControlName]="prop"> 
                               </div>
                       </div>
                   </div>
               </div>  
   </form>
<button type="submit" (click)="addNewInputField()"> &nbsp;Add New Column &nbsp; </button>

issuecomponent.ts

import { Component, ViewEncapsulation, Pipe, PipeTransform, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { ModalComponent } from '../../modal/modal.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'viewhistory',
  templateUrl: './issuecomponent.html',
})


export class IssuerTestcaseExecution implements OnInit {
  issuerTestCaseFrm: FormGroup;
  fields: any;
  fieldProps: any;
  formControls = {};
  constructor( 
    private fb: FormBuilder,  
    public modalService: NgbModal,
    ) {
    this.issuerTestCaseFrm = fb.group({
      'IssuerReferenceNumber': ['', Validators.required],
      'newfields': fb.array([]),
    });
  }

  initNewFields(): FormGroup {
    this.fieldProps.forEach(prop => {
      this.formControls[prop] = [this.fields[prop].value, Validators.required];
    });
    return this.fb.group(this.formControls);
  }

 //Assuming these results coming from modal view after add button click
  addNewInputField(): void {
      const modalRef = this.modalService.open(ModalComponent);
      modalRef.result.then((result) => {
         this.fields = {
          [result.fieldname]: {
            type: result.fieldtype,
            value: result.fieldvalue,
            label: result.fieldname,
          },
        };
        this.fieldProps = Object.keys(this.fields);
         const control = <FormArray>this.issuerTestCaseFrm.controls.newfields;
         control.push(this.initNewFields());
      }, (reason) => {

      });
  }
}

Beginnen Sie hier zu schreiben…

Similar Posts

Leave a Reply

Your email address will not be published.