How to generate dynamic textbox field using angular formgroup

Question

i want to use Angular reactive form in my project, to get a complex json object, i will explain my problem : I have this JSON object :

items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]}

i managed to get this User Interface with this code :

 <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">

 <div *ngIf="items?.departure">
    <span>{{items.departure}}</span> --> 
    <span *ngIf="items.stations.length > 0">
     {{items.stations[0].station}}
    </span>
    <span *ngIf="items.stations.length === 0">
      {{items.arrival}}
    </span>

     <div class="input-group spinner">
     <input type="text" formControlName="price" class="form-control">
     <div class="input-group-btn-vertical">
     <button (click)="spinnerPriceUp()" class="btn btn-default" 
     type="button"><i class="fa fa-caret-up"></i></button>
     <button (click)="spinnerPriceDown()" class="btn btn-default" 
     type="button"><i class="fa fa-caret-down"></i></button>
     </div>
    </div>
 </div>    

  <div *ngFor="let item of items.stations; let i=index, let last = last">

      <div *ngIf="!last">
      <span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">
         {{items.stations[i+1].station}}</span>
      <div class="input-group spinner">
      <input type="text" formControlName="price" class="form-control">
       <div class="input-group-btn-vertical">
       <button (click)="spinnerPriceUp()" class="btn btn-default" 
          type="button"><i class="fa fa-caret-up"></i></button>
       <button (click)="spinnerPriceDown()" class="btn btn-default" 
           type="button"><i class="fa fa-caret-down"></i></button>
        </div>
      </div>
    </div>
  </form>

so, you dont care about this code becausause i works as expected, my problem is, when i click on the submit botton i want to generate like this JSON object :

{object:[{"price":"the value"},{"price":"the value"},{,"price":"the value"}, {"price":"the value"},{"price":"the value"}]}

The value mentioned in the JSON object is the value in the price textbox field in UI.(image above)

I tried thid code but it doesnt work : Component.ts

ngOnInit() {
  this.myForm = this._fb.group({
  object: this._fb.array([
  this.initArray2()
   ]),
  })
}
initArray2() {
   return this._fb.group({
  price: ['00'],
 });
}

HTML CODE :

<div formArrayName="object" >
                    <div *ngFor="let address of myForm.controls.object.controls; let i=index" [formGroupName]="i" >
//i put the code aboove
</div>

I tried thid code but it doesnt work What is your original code that works? — yurzui
– yurzui, Commented Jan 9, 2018 at 9:38
thanks ser for your answer, yes i tried the last code but it dosnt work — user9192087
– user9192087, Commented Jan 9, 2018 at 9:44

Iancovici · Accepted Answer · 2018-01-11 12:57:03Z

In html, Your code ngFor loop is missing closing div.
Your formGroup needs to be declared myform: FormGroup
If you're planning to use a form builder, make sure you inject it

(outside component export class)

import {FormBuilder, FormGroup} from '@angular/forms';

(inside component export class)

constructor(private _fb: FormBuider) {}

You need to iterate through your form and get the object array, yet you're iterating through stations instead

.ts

  myForm: FormGroup;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this._fb.group({
      object: this._fb.array([
        this.initArray2()
      ]),
    });

  }


  initArray2() {
    return this._fb.group({
      price: ['00'],
    });
  }

.html

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">

  <div *ngIf="items?.departure">
    <span>{{items.departure}}</span> -->
    <span *ngIf="items.stations.length > 0">
     {{items.stations[0].station}}
    </span>
    <span *ngIf="items.stations.length === 0">
      {{items.arrival}}
    </span>

    <div class="input-group spinner">
      <input type="text" formControlName="price" class="form-control">
      <div class="input-group-btn-vertical">
        <button (click)="spinnerPriceUp()" class="btn btn-default"
                type="button"><i class="fa fa-caret-up"></i></button>
        <button (click)="spinnerPriceDown()" class="btn btn-default"
                type="button"><i class="fa fa-caret-down"></i></button>
      </div>
    </div>
  </div>

  <div formArrayName="object" >
    <div *ngFor="let item of myForm.get('object').controls; let i=index"
         [formGroupName]="i">

      <div class="input-group spinner">
        <input type="text" formControlName="price" class="form-control">
        <div class="input-group-btn-vertical"></div>
      </div>
    </div>
  </div>
</form>

Collectives™ on Stack Overflow

How to generate dynamic textbox field using angular formgroup

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related