Angular 2 [禁用]无效

Question

当文本框中没有任何内容时，我需要禁用添加英雄按钮。你能告诉我为什么这不起作用吗？

<form novalidate #f="ngForm">

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<label>New hero name: <input required #newHeroName /></label>
<button (click)="addHero(newHeroName.value); newHeroName.value=''" 
         [disabled]="f.invalid">Add Hero</button>

</form>

Plunker在这里：Plunker

文件为：app/toh/hero-list.component.html

Answer 1

如果您添加(input)="null"喜欢

<input #newHeroName required (input)="null"

然后Angular将在每次input事件后运行变更检测。

没有它Angular将无法识别任何变化。

使用

<button [disabled]="!newHeroName.value">Add Hero</button>

根据输入是否为空，您可以获得按钮启用/禁用设置。

Plunker example

Answer 2

更多观察;这里是@GünterZöchbauer解决方案，因为plnkr无法编辑：

按如下方式更改这些部分：

<label>New hero name: 
<input #newHeroName required (input)="null" /> </label> 
<button (click)="addHero(newHeroName.value); newHeroName.value=''" 
 [disabled]="!newHeroName.value">Add Hero</button>

请检查@GünterZöchbauer的答案

Answer 3

将您的输入更改为此，然后它可以工作：

...
<input #newHeroName type="text" 
class="form-control" 
id="name" required [(ngModel)]="model" name="name" ></label>
...

Answer 4

只需更改下面的代码，它就适用于你的plunker：

<label>New hero name: <input [ngModel]="newHeroName.value" #newHeroName required name="heroname"/></label>
<button (click)="addHero(newHeroName.value); newHeroName.value=''" 
     [disabled]="!f.form.valid">Add Hero</button>