populate form dynamically in angular?

Question

I am creating dynamic form by getting data from backend. how can i use formcontrol. i getting error stating Cannot find control with name: 'obj.name'. how can i initializeForm by iterating over toolData instead hard code intializing.

initializeForm(){
   // here i am intializing manually how can i initialize by iterating over toolData 
    this.formValue=this.fb.group({
      uname:['',[Validators.required,Validators.pattern('^[a-zA-Z \-\']+')]],
      xyz:['',[Validators.required]],
      abc:['',[Validators.required]],
    })
  }

<form [formGroup]="formValue">
    <span *ngFor="let obj of toolData">
       <label for="obj.name">{{obj.label}}</label>
       <input type="obj.type" id="obj.name" name="obj.name" formControlName="obj.name" value="obj.value" required="obj.required" />
    </span>
</form>

toolData=[{"type":"text","name":"uname","label":"user Name","value":"default","required":true},
    {"type":"number","name":"xyz","label":"Sample Value","value":"1","min":0,"max":100,"required":true},
    {"type":"number","name":"abc","label":"ABC ","value":"6","min":0,"max":100,"required":true}]

Никита Середа · Accepted Answer · 2021-12-22 03:55:37Z

1

constructor(
    ...
    private formBuilder: FormBuilder,
    ...
) {}

  ngOnInit(): void {
  this.initForm(); // init form with default values before u get response from server
    // after getting data from server call initControls()
  }

  // convenience getters for easy access to form fields
  get controls(): {[key: string]: AbstractControl} { return this.form.controls; }
  get someControls(): FormArray { return this.controls.someControls as FormArray; }

initForm(): void {
    this.form = this.formBuilder.group({
      someControls: new FormArray([])
    });
}

initControls(): void {
const someControlFormGroup = this.formBuilder.group({
      name: [defaultValue, [Validators.required]],
    });
    this.someControls.push(someControlFormGroup);
}

now you can just use formControlName while each controls in template

edited Dec 22, 2021 at 3:55

answered Dec 21, 2021 at 10:50

Никита Середа

2,0861 gold badge20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omid Aiene · Accepted Answer · 2021-12-21 10:45:23Z

0

property binding has been done incorrectly, trying the below code.

[formControlName]="obj.name"

for more detail, please see the https://angular.io/guide/property-binding

answered Dec 21, 2021 at 10:45

Omid Aiene

212 bronze badges

Collectives™ on Stack Overflow

populate form dynamically in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related