Initially i am having a simple JSON like this,

  jsonData = {
    status : "true",
    message: "Dynamic creation of input boxes and patch its value",
    result: [
        {
            "dataOneValue": "12cm"
        },
        {
            "dataTwoValue": "10cm"
        }
    ]
}

And ngOnInit,

ngOnInit() {
  this.jsonData.result.forEach(element => {
    console.log(element);
  });

Using this JSON, i need to create input boxes where the key and value was given in result array..

Using the above i need to set key and value for the input boxes,

So it will like,

key dataOneValue => value 12cm

key dataTwoValue => value 10cm

Here i have given only 2 just for understanding but it will not static.., It may vary based on the number of objects the result array has..

So how can i set the key and value to the input boxes from the result array of json?

Stackblitz

Initially i am having a simple JSON like this,

  jsonData = {
    status : "true",
    message: "Dynamic creation of input boxes and patch its value",
    result: [
        {
            "dataOneValue": "12cm"
        },
        {
            "dataTwoValue": "10cm"
        }
    ]
}

And ngOnInit,

ngOnInit() {
  this.jsonData.result.forEach(element => {
    console.log(element);
  });

Using this JSON, i need to create input boxes where the key and value was given in result array..

Using the above i need to set key and value for the input boxes,

So it will like,

key dataOneValue => value 12cm

key dataTwoValue => value 10cm

Here i have given only 2 just for understanding but it will not static.., It may vary based on the number of objects the result array has..

So how can i set the key and value to the input boxes from the result array of json?

Stackblitz https://stackblitz./edit/angular-x7mda4

• javascript
• angular
• typescript
• angular6
• angular-reactive-forms

Share Improve this question Follow edited Dec 4, 2018 at 13:27 Maniraj Murugan asked Dec 4, 2018 at 12:45 Maniraj MuruganManiraj Murugan 9,0942424 gold badges7676 silver badges122122 bronze badges 3

• There will be only 2 text boxes ? Or you want to create as many as result has ? – Rameez Raja Commented Dec 4, 2018 at 12:53
• @RameezRaja, It will be based on the number of object the result has and its not static of 2 boxes alone.. – Maniraj Murugan Commented Dec 4, 2018 at 12:54
• @undefined have updated, please check – Prashant Pimpale Commented Dec 4, 2018 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Maybe this helps:

https://stackblitz./edit/angular-z6fuog

<form [formGroup]="form">
  <span *ngFor="let control of controls">
    <input type="text" [formControlName]="control" placeholder="dataOneValue">
  <br><br>
  </span>
</form>

ngOnInit() {  
  // firstName: ['', Validators.required],
  let _controls = {};
  this.jsonData.result.forEach(element => {
    let key = Object.keys(element)[0];    
    let control = [element[key], Validators.required];
    _controls[key] = control;
    this.controls.push(key);
    //console.log(_controls);
  });
  this.form = this.formBuilder.group(_controls);  
}

This should work with Reactive forms by building the form dynamically:

https://stackblitz./edit/angular-x7mda4

In app.ponent.ts

get resultForms() {
  return this.resultForm.get('results') as FormArray
}

ngOnInit() {
  this.resultForm = this.fb.group({
    results: this.fb.array([ ]),
  });

  this.jsonData.result.forEach(element => {
    const resultGroup = this.fb.group({
      value: element[Object.keys(element)[0]]
    })
    this.resultForms.push(resultGroup);
  });
}

In app.ponent.html

<form [formGroup]="resultForm">
  <div formArrayName="results">
      <div *ngFor="let result of resultForms.controls; let i=index" [formGroupName]="i">
          <input formControlName="value">
      </div>
  </div>
</form>