Question

在合并对象数据和对象时遇到问题。当我尝试合并但似乎无法正常工作时。像波纹管一样

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

如何对其进行更改以使其像这张图片一样工作。

这是我的stackblitz演示和代码

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}

将对象与对象合并

2 个答案: