How to generate form elements using typescript classes and objects using Reactive Forms in angular

Question

I have a class file as follows.

export class ClassA {
    description: string;
    type: string;
    order: number;
    constructor(descrption: string, type: string, order: number) {
        this.description = descrption;
        this.type = type;
        this.order = order;
    }
}

Now I want to create form elements(text boxes) using this class through type script. In my html page the code is as follows

<form [formGroup]="myForm">

</form>

In my typescript file i.e (.ts )file the code is as follows.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  arr = Array<ClassA>();
  r1: ClassA;
  r2: ClassA;
  myForm:FormGroup;
  constructor() {
    this.r1 = new ClassA('description1', 'text', 1);
    this.arr.push(this.r1);
    this.r2 = new ClassA('description2', 'text', 2);
    this.arr.push(this.r2);
  }
  ngOnInit() {
    console.log(this.arr);
  }
}

Now using this formGroup how to make these class fields as input elements in form dynamically ?

Your title contradicts your question. If you want reactive forms approach don’t ask for template driven approach. — Hugo Noro
– Hugo Noro, Commented Dec 26, 2017 at 10:08
Thank You I have changed the question.Would you please look into it and help me \ — roopteja
– roopteja, Commented Dec 26, 2017 at 12:33

AVJT82 · Accepted Answer · 2017-12-27 10:19:45Z

What I would do, since you have a class and know how the build of the form should look like, I'd use it to push formgroups to a FormArray, so first build form, iterate your array and push each object to array as formGroup:

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    formArray: this.fb.array([])
  });
  this.r1 = new ClassA('description1', 'text', 1);
  this.arr.push(this.r1);
  this.r2 = new ClassA('description2', 'text', 2);
  this.arr.push(this.r2);

  this.arr.forEach(x => {
    let formArr = this.myForm.controls.formArray as FormArray;
    this.arr.forEach(x => {
      formArr.push(this.fb.group({
        description: [x.description],
        type: [x.type],
        order: [x.order]
      }))
    })
  })
}

and if you want to push new object of class ClassA, you can do it like:

formArr.push(this.fb.group(new ClassA('desc3','type3',3)))

Then in template just iterate this form array:

<form [formGroup]="myForm">
  <div formArrayName="formArr">
    <div *ngFor="let item of myForm.get('formArr').controls; let i = index" [formGroupName]="i">
      <input formControlName="description" />
      <input formControlName="type" />
      <input formControlName="order" />
    </div>
  </div>
</form>

Hopefully this is something you are looking for! :)

StackBlitz

Sandip Jaiswal · Accepted Answer · 2017-12-26 10:50:22Z

0

Just create a component and take a object as input. You can get all properties of a object by following code:

Object.keys(obj);

Above code will give you all keys of your object. Now create a formGroup and add FormControls. In Template use ngfor to render inputs.

Use following code:

import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from "@angular/forms";

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <div *ngFor="let formKey of objKeys">
        <input type="text" formControlName="{{formKey}}" />
      </div>

      {{myForm.value | json}}
    </form>
  `,
})
export class FormComponent  {
  public myForm: FormGroup;
  public myObj = {
    firstName: "",
    lastName: ""
  };
  public objKeys: string[] = [];
  constructor(private fb: FormBuilder) {
    this.objKeys = Object.keys(this.myObj);
    console.log(this.objKeys);
    this.myForm = fb.group({});
    Object.keys(this.myObj).forEach(key => {
    this.myForm.addControl(key, new FormControl(this.myObj[key]));      
    })
  }
}

Hope it will help

edited Dec 26, 2017 at 10:50

answered Dec 26, 2017 at 10:14

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

2 Comments

roopteja Over a year ago

I have tried that method but it is giving me errors. I am trying with FormArray. Any suggestions to use FormArray.

roopteja Over a year ago

Now If you want to add same set of myObj element to objKeys array we have to use form array I guess. So when adding them I am getting few errors.

Collectives™ on Stack Overflow

How to generate form elements using typescript classes and objects using Reactive Forms in angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related