Angular 2形式验证器弄乱了取消按钮

我有一个数据收集组件,其中包含取消按钮以取消整个过程.问题是,如果某些由Angular 2验证器验证的 HTML输入字段具有焦点且无效,并且我按下取消按钮,则不会删除该组件.相反,验证器将触发,按下取消按钮将被忽略.在验证器抱怨之后,我必须第二次按下它,使组件消失.取消按钮本身只是触发远离组件的路由.相关代码：

component.html

<form [formGroup]="addReminderForm" (ngSubmit)="onSubmit(addReminderForm.value)">
  <input type="text" [formControl]="addReminderForm.controls['text']" />
  <div class="error" *ngIf="addReminderForm.controls['text'].hasError('required') &&
  addReminderForm.controls['text'].touched">You must enter reminder text</div>

  <button type="submit" [disabled]="!addReminderForm.valid" >Add Reminder</button>
</form>
<button (click)="cancel()">Cancel</button>

component.ts：

ngOnInit() {
  this.addReminderForm = this.fb.group({??
??????'text': ['',Validators.compose([Validators.required,Validators.maxLength(20)])]
  });
}
cancel() {
    // Simply navigate back to reminders view
    this.router.navigate(['../'],{ relativeTo: this.route }); // Go up to parent route     
 }

我不知道为什么会这样.有任何想法吗？