禁用按钮的表单验证（Angular 4）

Question

我有一个正在加载对话框（材质对话框）的组件，其中包含很少的表单字段。

这是一个字段的标记：

<div class="row">
  <div class="col-md-12">
    <label for="name">Name</label>
    <input [(ngModel)]="templatecategory.name" type="text" class="form-control" id="name" name="name" required #newName="ngModel" />
    <div *ngIf="newName.invalid && (newName.dirty || newName.touched)" class="alert alert-danger">
      <div *ngIf="newName.errors.required">Name is required.</div>
    </div>
  </div>
</div>

模型上有两个按钮用于保存，接下来是取消。

以下是按钮标记：

<div class="modal-footer"  mat-dialog-actions>
  <button type="submit" class="btn btn-primary" [disabled]="!newTemplateCategoryForm.form.valid">Save</button>
  <button type="button" class="btn btn-secondary" (click)="onCancel();">Cancel</button>
</div>

但即使按下取消按钮，表单似乎也在验证。我该如何避免这种行为？