http.put is always followed by http.post

Question

I have a form and when the user clicks on submit, I would like to send the data to a rest endpoint. I am using the http module in Angular 2.

Here's the form:

<form novalidate [formGroup]="formGroup()" (ngSubmit)="send()">

  <input (change)="enableThree($event.target.checked)" 
  formControlName="one" type="checkbox"  />

  <input (change)="disable($event.target.checked)" 
  formControlName="two" type="checkbox"  >

  <input formControlName="three"type="text"  >

  <input  formControlName="four"  type="text"  >

  <input  formControlName="five" type="text"  >

  <input  formControlName="six" type="number" > 

    <button>Go</button>

</form>

Here's the component:

import {    Component,    OnInit} from '@angular/core';
import {    FormBuilder,    FormGroup,    FormControl} from '@angular/forms';
import { MyService } from '../my.service';

@Component({
    selector: 'my-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

    private readonly fb: FormBuilder;
    private readonly myForm: FormGroup;
    private data: any;
    private myService : MyService;

    constructor(formB: FormBuilder, myService : MyService) {
        this.myService = myService;
        this.fb = formB;
        this.myForm = this.fb.group({
            thre: [{
                value: "",
                disabled: true
            }],
            four: new FormControl(""),
            five: new FormControl(""),
            six: new FormControl(""),
            one:new FormControl(""),
            two:new FormControl("")
        });

    }

    ngOnInit() {}

    formGroup(): FormGroup {
        return this.myForm;
    }

    send() {

        console.log("SEND REQUEST CALLED");

        this.data = this.formGroup().value;
        this.formGroup().reset();

        if (this.data.one) {
            this.updateData();

        } if (this.data.two) {

            this.deleteData();

        }else {
            this.addData();

        }
    }
    updateData() {
        this.myService.update(this.data);
    }

        deleteData() {
        this.myService.delete(this.data.artnr);
    }

    addData() {
        this.myService.add(this.data);
    }

}

And here's the service class:

import { Injectable } from '@angular/core';
import {    Http,    Response,    Headers,    RequestOptions} from '@angular/http';
import { Entity } from './entity';

@Injectable()
export class MyService {

    private baseUrl: string = 'http://localhost:5868/restapi;
    private http: Http;
    private entities: Array<Entity>;
      private readonly headers: Headers;
    private readonly requestOptions: RequestOptions;

  constructor(http : Http){
    this.http = http;
      this.headers = new Headers({
            'Content-Type': 'application/json'
        });
        this.requestOptions = new RequestOptions({
            headers: this.headers
        });
  }

    getEntities(): Array<Entity> {
      return this.entities;
    }

  getAll() {
    this.http.get( this.baseUrl + '/entities').
    map((response: Response) => response.json()).
    subscribe(data => {this.entities = data}, error => {
            console.log(error);
        });

  }

  update(data: any) {
    let id = data.three;
    this.http.put(this.baseUrl + '/entities/' + id, data, this.requestOptions).
    map((response: Response) => response.json()).
    subscribe(data => {
       console.log(data);
       this.getAll();
    }, error => {
            console.log(error);
        });
  }

  add(data: any) {
    this.http.post(this.baseUrl + '/entities', data, this.requestOptions).
    map((response: Response) => response.json()).
    subscribe(data=> {
      this.entities.push(data);
    }, error => {
            console.log(error);
        });
  }

  delete(id: Number) {
    this.http.delete(this.baseUrl + '/entities/' + id, this.requestOptions).
    map((response: Response) => response.json()).
    subscribe(data => {
      console.log(data);
      this.getAll();
    }, error => {
            console.log(error);
        });
  }


}

Basically, in send() in the component class, I decide whether it's an update, delete or add based on whether a certain checkbox is clicked.

What happens is, when I want to update the data using http.put, there is always an http.post executed as well and an existing entity is updated but a new entity with the same values is created in the following post request.

This doesn't happen when I delete or add an entity, only when I update.

Strangely, console.log("SEND REQUEST CALLED"); is executed only once.

What do I need to change here? Thanks for help and tips!

Answer 1

Basically, if you properly format your existing code, it looks like this:

 if (this.data.one) {
    this.updateData();
 }


 if (this.data.two) {
   this.deleteData();

 }else {
    this.addData();
 }

which is not the behaviour you're looking for.

Your if statement should instead be

  if (this.data.one) {
     this.updateData(); 

  } else if (this.data.two) {   //*** Be careful here    
      this.deleteData();

  } else {
      this.addData();
  }

you are missing the else if