Объединить объект с объектом

Question

У меня проблема с объединением данных объекта с объектом .. Когда я пытаюсь объединить, но похоже, что он работает не так, как ожидалось .. Как на изображении ниже

[: https://i.stack.imgur.com/9v5Nj.png]

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

This is my stackblitz demo и код

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>

Компонент

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);
  }

Надеюсь, вы все можете помочь .. Спасибо за аванс

Answer 1

Вы можете напрямую изменить объект MyForm, как показано ниже.

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

Если вы не хотите переопределять объект MyForm, вы можете создать новый объект путем глубокого клонирования MyForm, как показано ниже в коде

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

Это stackblitz код

Answer 2

Пожалуйста, измените код ниже.

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

Кому

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