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

來源

2017-01-02 Sampath

爲什麼這需要一個帶有〜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

來源

2017-01-02 09:17:12

它仍然不工作不？你的搶劫者也沒有顯示你在說什麼？我錯在哪裏？請看看。 – Sampath

不知道你的意思。輸入爲空時該按鈕被禁用，非空時則被禁用。這不是你想要的嗎？ –

是的，這就是我想要的，但是你的重拳並沒有表現出來嗎？那是錯的嗎？ – Sampath

更改您的輸入到這一點，那麼它的工作原理：

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

來源

2017-01-02 09:23:15 Karl

更看;這裏的@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的回答

來源

2017-01-02 09:33:36

是的，非常感謝您的支持:) – 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>

來源

2017-01-02 09:42:32

Angular 2 [禁用]不起作用

回答

相關問題