不使用表单进行验证如果 <input> 字段为空，我如何禁用 Angular 中的按钮答案

【问题标题】：without using form for validation How can I disabled a button in angular if <input> field is empty不使用表单进行验证如果 <input> 字段为空，我如何禁用 Angular 中的按钮
【发布时间】：2017-05-08 11:45:43
【问题描述】：

我正在尝试以角度进行 @output 因为我有一个带按钮的输入字段，我将使用 @output() 将输入的字段数据发送给父级我想禁用一个按钮如果输入字段为空，如何在不使用表单验证的情况下禁用。

我试过这段代码

  <input type="text" [(ngModel)] = "childInput" >
  <button [disabled] ="!childInput.value" (click)="sendToParent()">Send To Parent</button>

但如果输入字段为空，它会一直禁用按钮。

P.S 我找到了表单验证的答案，但我不想这样做表单验证或定义布尔变量

【问题讨论】：

或许可以试试[disabled] ="!childInput.length"
CSS? stackoverflow.com/questions/3617020/…
谢谢@Und3rTow 的建议我已经解决了问题
谢谢@mplungjan 的建议我已经解决了问题

标签： javascript html angularjs angular angular2-databinding

【解决方案1】：

如果你不想使用 ngModel：

<input type="text" #childInput >
<button [disabled]="!childInput.value.length>0" (click)="sendToParent()">Send To Parent</button>

【讨论】：

我已经对其进行了测试，对我来说它可以正常工作。引用变量的用法在link中解释
这行得通，但如果我使用 >10 或 0 以外的任何值，它会以某种方式停止工作。

【解决方案2】：

此代码将起作用

<input type="text" [(ngModel)] = "childInput" >
<button [disabled] ="!childInput" (click)="sendToParent()">Send To Parent</button>

【讨论】：