Как я могу отправлять только отредактированные / измененные поля в угловой форме 2+ при редактировании?

Question

Я хотел бы при редактировании отправлять только отредактированные / измененные значения из моей формы.

В настоящее время моя форма отправляет все значения формы.

Я использую интерфейсы:

export interface WorkExperience {
  id?: number;     
  name_company:string;     
  date_start:string;
  date_end:string;     
}
export interface WorkExperienceUpdate {
  id_work_experience: number;
  experience: WorkExperience;
}

Я делаю это на своих .ts:

опыт работы: опыт работы;

this.experience = this.navParams.get('experience');

this.registrationForm = formBuilder.group({         
        company: [this.experience.name_company, Validators.required],         
        date_start: [this.formatDate(this.experience.date_start), Validators.required],
        date_end: [this.experience.date_end ? this.formatDate(this.experience.date_end) : '']            
      });

Мой HTML-код:

<form [formGroup]="registrationForm">              
          <ion-item>
            <ion-label floating>Company</ion-label>
            <ion-input type="text" formControlName="company"></ion-input>
          </ion-item>              
            <ion-label floating>Start Date</ion-label>
            <ion-datetime displayFormat="DD-MM-YYYY" formControlName="date_start"></ion-datetime>
          </ion-item>
          <ion-item>
            <ion-label floating>End Date</ion-label>
            <ion-datetime displayFormat="DD-MM-YYYY" formControlName="date_end"></ion-datetime>
          </ion-item>
        </form>

Я использовал одну и ту же форму для добавления и редактирования, поэтому, когда я редактирую, мне нужно только отправить элементы, которые не совпадают, например:

1. Если редактировать только дату окончания, объект должен быть:

{ "id_educative_experience": 8, "educative_experience": { "date_end": "30-10-2017"
} }

и теперь со своим способом я отправляю все значения.

Моя отправка:

 submitRegistration(value): void {
    // EDIT
     let tempExp;
     tempExp = {          
              date_start: this.formatDate(value['date_start']),
              date_end: value['date_end'] ? this.formatDate(value['date_end']) : null,
              name_company: value['company'],         
            }

 let updateExperience: WorkExperienceUpdate = {
        experience: tempExp,
        id_work_experience: this.experience.id,
      };

 this._wp.updateWorkExperience(updateExperience).subscribe(r => {
        this.presentToast(`La experiencia laboral se ha modficado`);
        this.nav.pop().then(() => this.presentToast(`La experiencia laboral se ha modficado`));
      }, error => {
        this.nav.pop().then(() => {
          this.presentToast(`Ups, ha ocurrido un error.Inténtalo de nuevo`);
        });
      })
    }

Как мне это сделать, чтобы отправлять только отредактированные значения

Заранее спасибо

Answer 1

Вы можете проверить значения dirty формы.

getDirtyValues(cg: FormGroup) {
  const dirtyValues = {};
  Object.keys(cg.controls).forEach(c => {
    const currentControl = cg.get(c);

    if (currentControl.dirty) {
      dirtyValues[c] = currentControl.value;
    }
  });
  return dirtyValues;
}