How to use angular reactive form to generate a complex JSON object

Question

i tried many times to fix this issue, but i think your help angular developer, i'm trying to populate a json object into UI:

heres the JSON Object :

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

heres the User Interface , i have a submit button in the user interface, it doesnt appear but its not a problem it can execute this function :

save(){
  console.log(Json.stringify(this.myForm.value))
 }

the Json Object generated is :

{"tabls":[{"price":20}]}

it shows me just the only first price, but what i want is, show prices generated in the UI in my case the json generated should be :

{"tabls":[{"price":20},{"price":10}]}

How can i achieve this result please ?

heres the html code :

                  <div formArrayName="tabls">
                    <div *ngFor="let myGroup of myForm.controls.tabls.controls; let i=index">
                      <div [formGroupName]="i">

                        <div class="row">
                          <div class="col-sm-4" >
                              <div   >
                                  <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                    <i class="glyphicon  markerx" style="border: 5px solid #FED141"></i>
                                  </div>
                                <span >{{items.departure}}</span> 

                              </div>
                          </div>
                          <div class="col-sm-1" ><img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" ></div>
                          <div class="col-sm-4" >
                              <span *ngIf="items.stations.length > 0">
                                  {{items.stations[0].station}}
                              </span>
                              <span *ngIf="items.stations.length === 0">
                                  {{items.arrival}}
                              </span>
                          </div>

                          <div class="col-sm-3" >
                              <div class="input-group " >

                                  <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'textbox'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" /> 
                                  <span class="input-group-addon">Dhs</span>
                            </div>
                          </div>
                        </div>




                        <hr/>
                        <div class="row">
                            <div *ngIf="items?.arrival && items?.departure">
                                <div class="col-sm-4">
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #63a599"></i>
                                        </div>
                                        <span>{{items.departure}}</span> 

                                  </div>
                                </div>
                                <div class="col-sm-1" >
                                    <img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" >
                                  </div>
                                <div class="col-sm-4" >
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #F53F5B"></i>
                                        </div>
                                        <span>{{items.arrival}}</span>
                                    </div>
                                </div>

                                <div class="col-sm-3" >
                                    <div class="input-group ">

                                        <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'finalprice'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
                                        <span class="input-group-addon">Dhs</span>


                                    </div>
                                </div>

                            </div>
                        </div>
                      </div>
                    </div>

                  </div>

Typescript code :

ngOnInit() {
   this.myForm = this._fb.group({

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

as per this code your initArray returns only one price object — rijin
– rijin, Commented Jan 9, 2018 at 13:59

Dmitry Sobolevsky · Accepted Answer · 2018-01-09 13:51:30Z

0

You have to 2 inputs with formControlName="price", it overwrites previous value;

answered Jan 9, 2018 at 13:51

Dmitry Sobolevsky

1,1916 silver badges12 bronze badges

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

2 Comments

user9192087 Over a year ago

but what is the solution ??

user9192087 Over a year ago

because the json generated should be like this :{"tabls":[{"price":20},{"price":10}]}

Eliseo · Accepted Answer · 2018-01-09 14:37:48Z

0

ngOnInit() {
   let lista = this.buildArray([{price:0},{price:0}]);
   this.myForm = this._fb.group({
   tabls=lista
   }):

}

buildArray(data: any[]) {
    //witch each data, we create a fbGroup 

    const arr = myArray.map(data => {
      return this.fb.group({
        "Id": [data.Id], //we can omit some control
        "betslipTeamName": [data.betslipTeamName],
        "stake": [data.stake],
      });
    });
    //And return a array of fbGroup
    return this.fb.array(arr);
  }

See the example completed in Binding a text input to a property in an observable object - Angular 2+ or check the multiples links about this

answered Jan 9, 2018 at 14:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

5 Comments

user9192087 Over a year ago

thanks for answer, the items={"departure":"New York","arrival":"California","stations":[{"station":"toto"}]} is dynamic thats mean i could have multiple stations otherwize multiple prices..this my problem.

user9192087 Over a year ago

my final json object could be like this :{"tabls":[{"price":20},{"price":10},...]}

Eliseo Over a year ago

@Newme, it's an example at init. you must write this.buildArray(yourdata.tabls)

user9192087 Over a year ago

i have to change "Id": [data.Id], //we can omit some control "betslipTeamName": [data.betslipTeamName], "stake": [data.stake], by price :[] ?

user9192087 Over a year ago

but you should keep on mind that, i have n row of price not only two as mentionned here in your code : let lista = this.buildArray([{price:0},{price:0}]);

Collectives™ on Stack Overflow

How to use angular reactive form to generate a complex JSON object

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related