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

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

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

<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)] из ввода field1, он будет работать так, как должен (ввод field1 будет отключается, если я что-то ввожу в поле ввода field2)

Пример Plunker


person Mario Petrovic    schedule 05.04.2017    source источник
comment
Булевы атрибуты не принимают во внимание их значение. Если атрибут присутствует, значит true.   -  person    schedule 05.04.2017
comment
Ознакомьтесь с правдой и falsy в javascript .. пустая строка считается ложной.   -  person Suraj Rao    schedule 05.04.2017
comment
Хм, это странно. Но почему он ведет себя противоположно тому, что вы говорите, если я удалю [(ngModel)]   -  person Mario Petrovic    schedule 05.04.2017
comment
@suraj, это то, что я сказал в примере, эта пустая строка должна возвращать false   -  person Mario Petrovic    schedule 05.04.2017
comment
[disabled]="''" вернет true, настоящая загадка в том, почему он работает, когда вы удаляете модель.   -  person YounesM    schedule 05.04.2017
comment
[disabled]="someVar.length", похоже, работает: plnkr.co/edit/Lkq1FdXM2CryZ8jVbigf?p=preview   -  person Pete    schedule 05.04.2017
comment
@Pete - это только один из многих обходных путей. Поскольку 0 и '' оба возвращают false, он должен работать в обоих случаях.   -  person Mario Petrovic    schedule 05.04.2017


Ответы (2)


ОБНОВИТЬ

Я нашел ответ на этот вопрос в исходном коде angular (‹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"  />

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

person Fredrik Lundin    schedule 05.04.2017
comment
Спасибо за ответ, но это все еще проблема с Angular - person Mario Petrovic; 05.04.2017
comment
@ maxal90, если вы действительно верите, что это ошибка, вам следует сообщить о проблеме в официальном репозитории github. - person Fredrik Lundin; 05.04.2017
comment
Я тоже думал об этом, если присутствует пустая строка, она должна давать атрибут по правилам HTML. Но если вы установите 0 в качестве значения для someVar, field1 не будет отключен. И 0 - это то же самое, что и пустая строка false в инструкции if. - person Mario Petrovic; 05.04.2017
comment
я только что сделал там проблему. Надеюсь, он получит ответ. Спасибо, в любом случае - person Mario Petrovic; 05.04.2017
comment
@ maxal90: Ну, 0 - фальшивка, '0' - не фальшивка - person Fredrik Lundin; 05.04.2017
comment
@ maxal90, смотрите обновление, я нашел ответ в исходном коде - person Fredrik Lundin; 05.04.2017
comment
Идеально! Думаю, документация по этому поводу должна быть обновлена. - person Nirus; 05.04.2017
comment
@Nirus да, я вообще не нахожу его в документации tbh. Не уверен, зачем добавлена ​​эта проверка. - person Fredrik Lundin; 05.04.2017
comment
@ Фредрик Лундин, я только что видел ваш обновленный ответ. Это очень интересно. На самом деле я искал его в исходном коде, но не нашел файла: D Отличная находка. Я согласен, что эта проверка вообще не нужна. Надеюсь, они скоро его уберут - person Mario Petrovic; 05.04.2017

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

person eavichay    schedule 05.04.2017
comment
Я знаю, если я сделаю двойное отрицание !! someVar, я получу логическое значение, но почему он ведет себя по-другому, если [(ngModel)] удален - person Mario Petrovic; 05.04.2017
comment
пустое строковое значение является ложным developer.mozilla.org/en-US/docs/Glossary / Falsy - person Suraj Rao; 05.04.2017
comment
Речь идет об angular, а не о спецификациях Mozilla. - person eavichay; 05.04.2017