Пустая переменная дает истинное значение отключенному атрибуту на входе

Question

Я не знаю, если это проблема или нормальное поведение.

Если у нас есть такая форма:

<form #form="ngForm" >
  <div>
     <label>field1</label>
     <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar"  />                                                                                                                    
  </div>
  <div>
     <label>field2</label>
     <input type="text" name="field2" [(ngModel)]="someVar" />
  </div>
</form>

В то же время переменные mainVar и someVar устанавливаются в пустую строку в компоненте:

mainVar = '';
someVar = '';

Это приведет к отключению ввода с именем field1, даже если someVar - пустая строка. Насколько мне известно, переменная, которая является пустой строкой, должна возвращать false для оператора if.

Но самое странное, что если я уберу атрибут [(ngModel)] из поля ввода1, он будет работать как надо (поле ввода1 будет отключено, если я введу что-то во поле ввода2)

Пример плунжера

Answer 1

ОБНОВИТЬ

Я нашел ответ на это в угловом исходном коде (<3 с открытым исходным кодом!). ngModel Контроллер явно проверяет '' когда disabled input изменено Если вход строго равен '', элемент будет отключен. Так что это поведение разработано.

Вот как выглядит исходный код ( ссылка на GitHub, см. Строки 142 и 217)

const isDisabled = disabledValue === '' || (disabledValue && disabledValue !== 'false');

Это означает, что вы не можете использовать пустую строку как ложное для установки ввода, который использует ngModel отключить это.

Вот как вы можете обойти это

<input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar ? true : false"  />

Пример рабочего плунжера

Answer 2

Установите для него значение null/undefined/false, и оно не будет отключено. Строка пусто все еще значение.