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

【问题标题】：Empty variable gives true value to disabled attribute on input空变量为输入的禁用属性赋予真实值
【发布时间】：2017-08-31 02:25:43
【问题描述】：

我不知道这是问题还是正常行为。

如果我们有这样的表格：

<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 语句。

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

中输入内容，strong> 将被禁用

Plunker example

【问题讨论】：

布尔属性不考虑它们的值。如果该属性存在，则表示true。
在 javascript 中查看 truthy 和 falsy。空字符串被认为是虚假的。
嗯，这很奇怪。但是，如果我删除 [(ngModel)]，为什么它的行为与您所说的相反
@suraj ，这就是我在示例中所说的，空字符串应该返回 false
[disabled]="''" 将返回true，真正的谜团是为什么当你删除模型时它会起作用。

标签： javascript angular angular2-forms angular2-directives angular2-ngmodel

【解决方案1】：

更新

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

这里是如何查看源代码（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

【讨论】：

感谢您的回答，但这仍然是 Angular 问题
@maxal90，如果你真的认为这是一个错误，你应该在官方 github repo 提交问题
我也想过，如果存在空字符串，它应该按照 HTML 的规则给出属性。但是，如果您将 someVar 的值设置为 0，则不会禁用 field1。而0等于if语句中的空字符串false
我只是在那里提出了问题。希望它会得到答案。还是谢谢
@maxal90，查看更新，我在源代码中找到了答案

【解决方案2】：

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

【讨论】：

我知道，如果我做双重否定!!someVar 我会得到布尔值，但是如果 [(ngModel)] 被删除，为什么它的行为会有所不同
空字符串值为 false developer.mozilla.org/en-US/docs/Glossary/Falsy
问题是关于角度的，而不是 Mozilla 规范。