Angular 5 Form approach for edit/new cases - Address example

form.ts

export abstract class Form {
  protected abstract finishSubmit();
  protected abstract form();
  protected abstract createForm();
}

user-address-edit.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/finally';

import { Address } from '../../../domain';
import { AddressService } from '../../../services';

import { UserAddressFormComponent } from './user-address-form.component';

@Component({
  templateUrl: './user-address-form.component.html',
  styleUrls: ['./user-address-form.component.css']
})
export class UserAddressEditComponent extends UserAddressFormComponent {

  constructor(
    private service: AddressService,
    router: Router,
    route: ActivatedRoute
  ) {
    super(router);
    route.data.subscribe((data: { address: any }) => {
      if (data.address) {
        this.address = data.address;
      }
    });
  }

  onSubmit() {
    return this.service.update(
      this.id,
      this.form()
    ).finally(
      () => this.finishSubmit()
    ).subscribe();
  }
}

user-address-form.component.html

<span class="page-title">Editar Endereço</span>

<form class="basic-form" [formGroup]="addressForm" role="form">
  <mat-form-field>
    <input matInput placeholder="CEP" formControlName="zipcode">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Logradouro" formControlName="street">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Número" formControlName="number">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Complemento" formControlName="complement">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Bairro" formControlName="neighborhood">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Cidade" formControlName="city">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Estado" formControlName="state">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="País" formControlName="country">
  </mat-form-field>

  <go-back-and-save-btn goback="/user/my-informations" fxLayoutAlign="end"
    (save)="addressForm.valid && onSubmit()"></go-back-and-save-btn>
</form>

user-address-form.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

import { Address } from '../../../domain';
import { AddressService } from '../../../services';
import { Form } from '../../../utils/form';

export class UserAddressFormComponent extends Form {

  private _address: Address = {};
  protected addressForm: FormGroup;
  protected id: Number;

  constructor (
    protected router: Router
  ) {
    super();
    this.createForm();
  }

  public get address() {
    return this._address;
  }

  public set address(address: Address) {
    this.id = address.id;
    this._address = address;
    const addressForm = {...address};
    delete addressForm.id;
    this.addressForm.setValue(addressForm);
  }

  protected finishSubmit() {
    return this.router.navigate(['/user/my-informations']);
  }

  protected form() {
    return {
      zipcode: this.addressForm.get('zipcode').value,
      street: this.addressForm.get('street').value,
      number: this.addressForm.get('number').value,
      complement: this.addressForm.get('complement').value,
      neighborhood: this.addressForm.get('neighborhood').value,
      city: this.addressForm.get('city').value,
      state: this.addressForm.get('state').value,
      country: this.addressForm.get('country').value,
    };
  }

  protected createForm() {
    this.addressForm = new FormGroup({
      zipcode: new FormControl(this.address.zipcode),
      street: new FormControl(this.address.street),
      number: new FormControl(this.address.number),
      complement: new FormControl(this.address.complement),
      neighborhood: new FormControl(this.address.neighborhood),
      city: new FormControl(this.address.city),
      state: new FormControl(this.address.state),
      country: new FormControl(this.address.country),
    });
  }
}

user-address-new.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/finally';

import { Address } from '../../../domain';
import { AddressService } from '../../../services';

import { UserAddressFormComponent } from './user-address-form.component';

@Component({
  templateUrl: './user-address-form.component.html',
  styleUrls: ['./user-address-form.component.css']
})
export class UserAddressNewComponent extends UserAddressFormComponent {

  constructor(
    private service: AddressService,
    router: Router
  ) {
    super(router);
  }

  onSubmit() {
    return this.service.create(
      this.form()
    ).finally(
      () => this.finishSubmit()
    ).subscribe();
  }
}

ajustar onSubmit para só chamar o finishSubmit() em caso de sucesso