Почему текстовое поле по-прежнему отключено после удаления значения из другого текстового поля в angular

Question

У меня есть страница angular с двумя текстовыми полями. Когда пользователь вводит значение в любое текстовое поле, другое текстовое поле должно быть отключено. Ниже мой код:

<div class="col-md-4">
        <input type="text" class="form-control" [(ngModel)]="firstName" [disabled]="lastName"/>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control" [(ngModel)]="lastName" [disabled]="firstName"/>
    </div>

Это работает нормально, но если я удаляю значение из текстового поля, то другое текстовое поле не включается.

Answer 1

Появляется директива ngModel, которая изменяет поведение привязки свойства disabled. Элемент ввода отключается, когда применяется ngModel и disabled привязывается к пустой строке:

<input type="text" [disabled]="''" />                 // Enabled
<input type="text" ngModel [disabled]="''" />         // Disabled <== unexpected!!!
<input type="text" ngModel [disabled]="" />           // Enabled
<input type="text" ngModel [disabled]="undefined" />  // Enabled
<input type="text" ngModel disabled />                // Disabled

Поэтому, если emptyString - пустая строка, следующий элемент управления будет отключен:

<input type="text" [(ngModel)]="value" [disabled]="emptyString" />    // Disabled

Вы можете получить ожидаемое поведение, преобразовав строку в логическое значение с помощью !!:

<input type="text" [(ngModel)]="value" [disabled]="!!emptyString" />  // Enabled

Такое поведение можно наблюдать в this stackblitz :