空变量为输入的禁用属性赋予真值

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 是空字符串。据我所知，空字符串的变量应该 return false 到 if 语句。

但最奇怪的是，如果我从输入 field1 中删除 [(ngModel)] 属性，它将正常工作（如果我在输入 field2 中输入内容，输入 field1 将被禁用）

Plunker example

Answer 1

设置为null/undefined/false，则不会被禁用。空字符串仍然是一个值。

Answer 2

更新

我在 angular 源代码（<3 开源！）中找到了答案。 ngModel 控制器在 disabled input 更改时明确检查 ''。如果输入严格等于 ''，该元素将被禁用。所以这种行为是设计使然。

这是源代码的样子（link to GitHub，请参阅第 142 行和第 217 行）

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

这意味着您不能使用空字符串作为虚假来设置使用ngModel禁用它的输入。

这里是你如何绕过它

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

Working plunker example

空变量为输入的禁用属性赋予真值

Empty variable gives true value to disabled attribute on input

javascript

angular2-forms

angular2-directives

angular2-ngmodel

angular

更新