Элемент управления .className не работает Angular2

Question

У кого-нибудь есть идея, почему я могу видеть valid и pristine здесь, но className возвращается обратно?

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

Answer 1

Вопрос заключается в том, что локальная переменная code просто захватывая ссылку ngModel, а не elementRef ввода. ngModel имеет доступ к объектам valid и pristine, но не имеет доступа к 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

Answer 2

<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 = "код" и в для = "код" для этикетки.

если не работает сообщите, пожалуйста, дайте мне знать.

Answer 3

В вашем коде переменная шаблона #code ссылается на экземпляр ngModel, созданный на входном элементе, который является расширением AbstractControlDirective. Как вы можете видеть в документации, это свойство имеет valid и pristine.

В этом классе, очевидно, нет className. Возможно добавление еще одну переменную шаблона на вход будет делать трюк (хотя я не понимаю, что вы хотите достичь с помощью этого :)):

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