用于创建和编辑关闭问题的Angular 5模板驱动表单（ng-bootstrap模式）

Question

我有使用ng-bootstrap模态

制作的Angular 5模板驱动表单

<button type="button" class="close" (click)="activeModal.close()" 
          aria-label="Close">
  <span aria-hidden="true">x</span>
</button>

 <form (ngSubmit)="editMode ? editBoard(board) : addBoard(newBoard.value)"
          #newBoard="ngForm"
          id="newBoard"
          name="newBoard"
          novalidate>
      <div class="form-group">
        <label>Board name</label>
        <input type="text"
               *ngIf="editMode"
               class="form-control"
               name="name"
               #name="ngModel"
               [ngModel]="board?.name"
               (input)="changeName(board, name.value)"
               placeholder="Enter a board name (required)"
               autofocus
               required>
        <div *ngIf="name.touched && name.errors">
          <div *ngIf="name.errors.required" class="alert alert-danger">Board name is required</div>
        </div>
      </div>
    </form>

我想用它来创建和编辑。虽然添加和编辑它是好的但是当我用“关闭”或“x”按钮关闭空表单模式（打开和关闭）时输入到字段时出错：

ERROR TypeError: Cannot set property 'name' of undefined

这是打开模态

的功能

public openBoardModalToAdd(): void { const ref = this.modal.open(BoardModalComponent, { keyboard: false, backdrop: 'static', size: 'lg' } ); ref.componentInstance.board = {name: ''}; ref.result.then(board => this.boards = [...this.boards, board]); }

我如何解决这个问题？