角度2 / ng-bootstrap：切换控制：读取/编辑

Question

我有一个出生日期字段，在阅读模式下，看起来像我所有的其他字段：

Name: Bob
DoB: 01/01/1990

但是当用户点击它时，它将切换到3个选择字段进行编辑：

Name: Bob
DoB:  [   ] [ ] [    ]
      |Jan|
      |Feb|

我可以弄清楚点击阅读字段如何将其转换为可编辑字段，但我不确定如何返回。只要焦点位于任何日期字段上，字段就应保持编辑模式。如果退出所有字段，它应该返回到读取模式。

<div class="form-group with-subtext">
    <input
            type="text"
            name="dob"
            [(ngModel)]="eeLogin.DateOfBirth"
            class="form-control"
            placeholder="Date of Birth"
            #dob
            required
            (click)="$angular(['DoBMonth']).focus()"
            [class.hidden]="editingDoB" />
    <span
            class="form-inline"
            [class.hidden]="!editingDoB">
        <select name="DoBMonth" [(ngModel)]="DoBMonth" class="form-control" (change)="setDaysThisMonth(DoBMonth);" (focus)="editingDoB=true" (blur)="editingDoB = editingDoB && true">
            <option *ngFor="let month of months" [value]="month.value">
                {{month.display}}
            </option>
        </select>

        <select name="DoBDay" class="form-control" [(ngModel)]="DoBDay" (focus)="editingDoB=true" (blur)="editingDoB = editingDoB && true">
            <option *ngFor="let day of days" [value]="day">
                {{day}}
            </option>
        </select>

        <select name="DoBYear" class="form-control" [(ngModel)]="DoBYear" (focus)="editingDoB=true" (blur)="editingDoB = editingDoB && true">
            <option *ngFor="let year of years" [value]="year">
                {{year}}
            </option>
        </select>
    </span>
</div>