Angular 2 [禁用]不起作用

问题描述：

当文本框上没有任何内容时，我需要禁用加入英雄按钮。可否告诉我为什么这种方式不起作用？Angular 2 [禁用]不起作用

<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

为什么这需要一个带有〜20个文件的Plunker？ Plunker提供了一个干净的Angular2模板。我放弃了，因为我没有在重击中找到按钮。 –

它只显示一个按钮没有？请参阅图片@GünterZöchbauer – Sampath

是的，但为什么你需要*** 20个文件***才能得到这个观点？当然，你可以削减这个，喜欢，两个。 – Makoto

答

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

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

然后角将运行变化检测每发生一次input事件。

没有它角度不会识别任何变化。

随着

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

你的按钮开启/关闭设定取决于输入为空。

Plunker example

它仍然不工作不？你的抢劫者也没有显示你在说什么？我错在哪里？请看看。 – Sampath

不知道你的意思。输入为空时该按钮被禁用，非空时则被禁用。这不是你想要的吗？ –

是的，这就是我想要的，但是你的重拳并没有表现出来吗？那是错的吗？ – Sampath

答

更改您的输入到这一点，那么它的工作原理：

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

答

更看;这里的@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的回答

是的，非常感谢您的支持:) – Sampath

不客气:) –

答

如下只要改变你的代码，它的工作原理与你的闯入者：

<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>

Angular 2 [禁用]不起作用

相关推荐