angular4 no validation on cancel

Question

I have an angular 4 reactive form with validation. This form has a Save and a Cancel button. When I click into an input with validation and then immediately after that click on the cancel button, the cancel button click event is not fired, as the input that I was in is not valid and a validation message is displayed.

When clicking 'Cancel' no validation must be done.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Observable } from "rxjs/Rx";

import { UserProfile } from "app/agencies/models/agency-userprofile.model";
import { SelectListItem } from "app/shared/models/select-list.model";

import { Globals } from "app/shared/services/globals.service";
import { AgencyService } from "app/agencies/services/agency.service";
import { AgencyUserService } from "app/agencies/services/agency-user.service";
import { FormErrorHandlerService } from "app/shared/services/form-error-handler.service";
import { MessageBoxService } from "app/core/message-box/services/message-box.service";
import { MessageBox } from "app/core/message-box/models/message-box.model";

@Component({
  selector: 'app-agency-admin',
  templateUrl: './agency-admin.component.html',
  styleUrls: ['./agency-admin.component.css']
})
export class AgencyAdminComponent implements OnInit {
  @Input() agencyuser: UserProfile;
  dbUser: UserProfile;
  @Output() boxIsClosed = new EventEmitter();
  @Output() userChanged = new EventEmitter();
  isNewUser = false;

  //required for async validators
  existingEmail = "";

  loadingUser = false;
  loadingStyle = Globals.sectionLoadingStyle;

  agencyAdminForm: FormGroup;

  //generic error message settings
  errorMessage: any;
  hasErrored = false;

  //global data
  statuses: SelectListItem[] = [];
  public customClass: string = 'customClass';

  constructor(private agencyService: AgencyService,
    private agencyUserService: AgencyUserService,
    private formErrorService: FormErrorHandlerService,
    private messageService: MessageBoxService) {

    
  }

  ngOnInit() {
    //set if EDIT or NEW
    if (this.agencyuser == undefined)
      this.isNewUser = true;
    
    //get all global data
    this.statuses = this.agencyService.getUserStatuses();

    //here the form and all validators ect must be created
    this.agencyAdminForm = new FormGroup({
      'FirstName': new FormControl('TestValidation', [Validators.required]),
      'LastName': new FormControl('Surname', [Validators.required])
    });

       
  }

  

  onSaveUser() {
    
  }//onSaveUser

  
  onClose() {
    //here we must close the accordian - open again will get details again from the server
    this.boxIsClosed.emit(true);
  }

 

}

  <div class="container">
    <div class="row">
    

      <form [formGroup]="agencyAdminForm"
            (ngSubmit)="onSaveUser()">

        <div class="col-xs-8 col-sm-6 col-md-4">

          <div class="form-group">
            <label for="FirstName">First Name</label>
            <span class="required-indicator">*</span>
            <input type="text"
                   id="FirstName"
                   formControlName="FirstName"
                   class="form-control">
            <span class="help-block"
                  *ngIf="!agencyAdminForm.get('FirstName').valid && agencyAdminForm.get('FirstName').touched">
              <span *ngIf="agencyAdminForm.get('FirstName').hasError('required') && agencyAdminForm.get('FirstName').touched"
                    class="required-indicator">This field is required.</span>
              <span *ngIf="agencyAdminForm.controls.FirstName.errors?.remote && agencyAdminForm.get('FirstName').touched"
                    class="required-indicator">First Name is invalid.</span>
            </span>

          </div>

          <div class="form-group">
            <label for="LastName">Last Name</label>
            <span class="required-indicator">*</span>
            <input type="text"
                   id="LastName"
                   formControlName="LastName"
                   class="form-control">
            <span class="help-block"
                  *ngIf="!agencyAdminForm.get('LastName').valid && agencyAdminForm.get('LastName').touched">
              <span *ngIf="agencyAdminForm.get('LastName').hasError('required') && agencyAdminForm.get('LastName').touched"
                    class="required-indicator">This field is required.</span>
              <span *ngIf="agencyAdminForm.controls.LastName.errors?.remote && agencyAdminForm.get('LastName').touched"
                    class="required-indicator">Last Name is invalid.</span>
            </span>

          </div>

         
          <div class="form-group" *ngIf="!isNewUser">
            <button class="btn action-button" type="submit" [disabled]="!agencyAdminForm.valid">Save</button>
            <button class="btn action-button" type="button" (click)="onClose()">Cancel</button>
          </div>
          
       
        </div>

      </form>
    </div>
  </div>