Angularjs 角度2/ng引导：切换控制：读取/编辑

我有一个出生日期字段，在读取模式下，该字段与我的所有其他字段类似：

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>

{{month.display}
{{day}
{{year}

这看起来像是一场可用性噩梦，会让你的应用程序的所有用户都感到愤怒。我不会那么做的。这不是一个有用的答案。真的。这就是我把它作为评论发布的原因。