Angular 5 template-driven form for creating and editing close issue (ng-bootstrap modal) - angular5

Question

I have such Angular 5 template-driven form made with ng-bootstrap modal
<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>
I want to use it for create and for edit. While adding and editing it's Ok but when I'm closing empty form modal (open and close) with "Close" or "x" buttons I have an error when input into field:
ERROR TypeError: Cannot set property 'name' of undefined
Here is a function to open a modal
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]);
}
How I can fix this?