Merge object with object

Question

I got problem to merge object data with object.. When I try to merge but it seems not working as expected..Like image bellow

[: https://i.sstatic.net/9v5Nj.png]

How to change it to make it working like this image..

This is my stackblitz demo and code

HTML

<form [formGroup]="myForm" (ngSubmit)="submit()">
  <div class="card-body">
  <div class="form-group row">
        <label class="col-sm-3">Name</label>
        <div class="col-sm-3">
        <input 
            formControlName="name" type="text" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-3">Adress</label>
        <div class="col-sm-3">
        <input 
            formControlName="adress" type="text" class="form-control">
        </div>
    </div>
  </div>
<div class="card-body" formGroupName="events">
         <div class="form-group row">
            <div class="col-md-12 d-flex">
            <h5>events</h5>
            <hr class="hr-list ml-3 col">
        </div>
         </div>    
         <div class="form-group row">
            <label class="col-sm-3">Event Name</label>
            <div class="col-sm-3">
                <input class="form-control" type="text" formControlName="eventName" [ngModel]="value" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-lg-3 col-form-label form-control-label">Location</label>
            <div class="col-lg-9">
                <input class="form-control" type="text" formControlName="location" [ngModel]="value" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3">Time</label>
            <div class="col-sm-2">
                <input class="form-control" type="time" format-value="hh:mm tt" min="01:00" max="12:00" formControlName="start" [ngModel]="value" >
            </div>
            <span class="dash">
                &ndash;
            </span>
            <div class="col-sm-2">
                <input class="form-control" type="time" format-value="hh:mm tt" min="01:00" max="12:00" formControlName="end" [ngModel]="value" >
            </div>
        </div>
        <div class="form-group row">
            <label class="col-lg-3 col-form-label form-control-label">Note</label>
            <div class="col-lg-9">
                <textarea class="form-control" formControlName="eventNote" rows="6" cols="50">   eventNote 
                </textarea>
            </div>
        </div>   
        </div>
         

    

       

    <button class="btn btn-primary" type="submit">Submit</button>

</form>

Component

submit(){

    console.log(this.myForm.value);
    var splitTimeStart = this.myForm.value.events.start.split(':'),
      hours,
      minutes,
      meridian;
      hours = splitTimeStart[0];
      minutes = splitTimeStart[1];
      if (hours > 12) {
        meridian = 'PM';
        hours -= 12;
      } else if (hours < 12) {
        meridian = 'AM';
        if (hours == 0) {
          hours = 12;
        }
      } else {
        meridian = 'PM';
      }
      let timeStart = hours + ':' + minutes + meridian;

      var splitTimeEnd = this.myForm.value.events.end.split(':'),
      hours,
      minutes,
      meridian;
      hours = splitTimeEnd[0];
      minutes = splitTimeEnd[1];
      if (hours > 12) {
        meridian = 'PM';
        hours -= 12;
      } else if (hours < 12) {
        meridian = 'AM';
        if (hours == 0) {
          hours = 12;
        }
      } else {
        meridian = 'PM';
      }
      let timeEnd = hours + ':' + minutes + meridian

     const dataTime = {
        start: timeStart,
        end: timeEnd
      }

      const mergeData ={...this.myForm.value,...dataTime}
      console.log(mergeData);
  }

Hope you all can help.. Thanks in aadvance

the difference between in both image is it display two time start and end one outside events and one inside events...I just want what start and end display outside events display inside events — Shah
– Shah, Commented Jul 14, 2020 at 5:39

Sandeep Adiseshu · Accepted Answer · 2020-07-14 05:57:10Z

3

You can directly modify the MyForm object as like below.

this.myForm.value.events.start = timeStart  
this.myForm.value.events.end = timeEnd

If you don't want to override MyForm object, you can new create object by deep cloning of MyForm as like below code

 let newObj = JSON.parse(JSON.stringify(this.myForm.value));  
 newObj.events.start = timeStart  
 newObj.events.end = timeEnd;

This is stackblitz code

answered Jul 14, 2020 at 5:57

Sandeep Adiseshu

786 bronze badges

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

Comments

surendra kumar · Accepted Answer · 2020-07-14 05:31:20Z

0

Please change the code below.

const mergeData ={...this.myForm.value,...dataTime}

To

let mergeData ={...this.myForm.value,...dataTime}

answered Jul 14, 2020 at 5:31

surendra kumar

1,78012 silver badges15 bronze badges

1 Comment

Shah Over a year ago

Thanks for the answer but it still same.. not working as expected

Collectives™ on Stack Overflow

Merge object with object

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related