Angular 2與[禁用]雙向綁定

我有一個輸入[disabled]，具體取決於另一個輸入的ngModel。最初[disabled]工作正常，但不是當我們更改相關輸入值時，[disabled]屬性不起作用。如何申請兩個綁定[disabled]屬性？Angular 2與[禁用]雙向綁定

以下是代碼片段。

<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event"> 
<option value="0">Disabled</option> 
<option value="0">Enabled</option> 
</select>

這種模式isDisabled正確改變。我可以看到模板{{isDisabled}}中的值如此變化。但沒有反映在選擇框的[disabled]屬性中。

<select [ngModel]="userInput" [disabled]="isDisabled"> 
<option value="test">Test</option> 
</select>

來源

2017-06-01 Wishnu

嘗試使用NG-禁用 –

@ O.Paquay這是Angular而不是AngularJS（Angular 1） –

主要問題是你兩個選項使用相同的value 0。但即使您將它們更改爲1 & 0分別爲Enable & Disable。它不會工作，因爲value屬性存儲值爲'0'（字符串'0'）& '1'（字符串1）（簡稱stringify的值）。

通過使用ngValue屬性綁定，您可以輕鬆解決此數據類型的問題。

<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event"> 
    <option [ngValue]="1">Disabled</option> 
    <option [ngValue]="0">Enabled</option> 
</select>

Plunker Demo

來源

2017-06-01 08:13:10

您需要爲輸入添加一個名稱屬性，並通過括起括號來進行ng-mode雙向綁定。無需使用ngModelChange用於此目的

<select [(ngModel)]="isDisabled" name='isDisabled'> 
     <option value="0">Disabled</option> 
     <option value="1">Enabled</option> 
</select> 
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'> 
     <option value="test">Test</option> 
</select>

來源

2017-06-01 08:03:50

嘗試使用true\false爲[disabled]這將節省您的功能比較，並使用2路直接結合。

像：

<select [(ngModel)]="isDisabled"> 
     <option value="true">Disabled</option> 
     <option value="false">Enabled</option> 
</select> 

<select [ngModel]="userInput" [disabled]="isDisabled"> 
    <option value="test">Test</option> 
</select>

See Plunker

來源

2017-06-01 08:06:35 anoop

在你的問題，這兩個選項的值0。

你要確保，一個是true，與其他被false

組件：

component class { 
    myVar = false 
}

模板：

<select [(ngModel)]="myVar"> 
    <option value="true">...</option 
    <option value="false">...</option 
</select> 

<select [disabled]="myVar"> 
    <option>...</option 
</select>

來源

2017-06-01 08:46:05

Angular 2與[禁用]雙向綁定

回答

相關問題