2017-02-21 74 views
0

有人有什麼想法,爲什麼我可以在這裏看到validpristine,但是className回來了嗎?控件的.className不起作用Angular2

<label for="codeInput" class="control-label"> Fund Code:</label> 
<input #code="ngModel" id="codeInput" class="form-control" name="codeC" required [(ngModel)]="fund.code"> 
Info: ({{code.className}}) {{code.valid}}, {{code.pristine}}<br> 

enter image description here

+0

可以添加的'一個的console.log代碼? – Ayyoub

+0

你期待什麼'className'值? –

回答

2

的問題是局部變量code只是抓住一個參考ngModel指令,而不是輸入的elementRefngModel有權訪問validpristine屬性,但無權訪問className。您可以指定其他本地變量來獲得一個參考input,這確實有className屬性,像這樣的ngModel參考:

<label for="codeInput" class="control-label"> Fund Code:</label> 
<input #code="ngModel" #codeInput id="codeInput" class="form-control" name="codeC" required [(ngModel)]="fund.code"> 
Info: ({{codeInput.className}}) {{code.valid}}, {{code.pristine}}<br> 

Demo

0
<label for="code" class="control-label"> Fund Code:</label> 
<input #code="ngModel" id="code" class="form-control" name="code" required  [(ngModel)]="fund.code"> 
Info: ({{code.className}}) {{code.valid}}, {{code.pristine}}<br> 

試試這個它會工作。與形式工作時

在角向需要爲名稱保持相同的名稱= 「代碼」[(ngModel)] = 「fund.code」#代碼= 「ngModel」id =「code」for =「code」 for label。

如果它不起作用,請讓我知道。

0

在您的代碼中,模板變量#code指的是在輸入元素上創建的ngModel實例,它是AbstractControlDirective的擴展。正如你在文檔中看到的那樣,它有一個validpristine屬性。

這個類顯然沒有className屬性。也許增加另一模板變量的輸入就可以了(雖然我看不到你想要這個:)達到什麼):

<input #input #code="ngModel" class="control" name="code" required [(ngModel)]="fund.code"> 
Info: ({{input.className}}) {{code.valid}}, {{code.pristine}} 
+0

這只是一門課的練習 - 我只是想知道爲什麼它不起作用。 – kpollock

+0

@kpollock啊,這很有道理! – PierreDuc