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

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>

同时变量ma​​inVar和someVar在组件中设置为空字符串:

mainVar = '';
someVar = '';

这将导致名称为 field1 的输入被禁用，即使 someVar 是空字符串。据我所知，空字符串变量应该返回 false 到 if 语句。

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

Plunker example

Answer 1

更新

我在 Angular 源代码中找到了答案(<3 开源!)。 ngModel Controller 在 禁用的输入 更改时显式检查 ''。如果输入严格等于 ''，该元素将被禁用。所以这种行为是设计使然。

这是源代码的样子(link to GitHub，见第 142 和 217 行)

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

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

这是你如何绕过它

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

Working plunker example