Control的.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> ，如下所示：

use IEEE.STD_LOGIC_UNSIGNED.ALL;

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>

试试这个它会起作用。

在处理表单时，您需要为 name =“code”， [（ngModel）] =“fund.code”保持相同的名称，< strong>＃code =“ngModel”， id =“code”， for =“code”代表标签。

如果它不起作用，请告诉我。

Answer 3

在您的代码中，模板变量#code引用在input元素上创建的ngModel实例，它是AbstractControlDirective的扩展。正如您在文档中看到的那样，它具有valid和pristine属性。

这个类显然没有className属性。也许在输入中添加另一个模板变量就可以了（尽管我没有看到你想用这个实现的目的:)）：

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