在角度 2 中访问模板变量 className 属性答案

【问题标题】：Accessing template variable className properties in angular 2在角度 2 中访问模板变量 className 属性
【发布时间】：2025-11-25 02:55:02
【问题描述】：

我有以下带有名称输入字段的表单。我正在尝试在现场进行验证。当我打印 name.className 值时，它会打印 ng-valid、ng-pristine 和其他类。

我想使用 *ngIf 来显示错误信息，但它不起作用。

我也试过 *ngIf="name.ng-invalid" 但它不起作用。谁能建议这里有什么问题？

    <form class="form-horizontal div-table" >
       <!-- Name -->
       <div class="form-group row-even">
          <label class="col-md-4 control-label">Name:</label>  
          <div class="col-md-7">
             <input id="name" name="name" type="text" class="form-control" [(ngModel)]="data.name" required minlength="3" maxlength="64" #name>
             <small *ngIf="name.ng-invalid">
             Name is required (minimum 3 characters).
             </small>
             <small>
             Element {{ name.className }}
             </small>
          </div>
       </div>
    </form>

【问题讨论】：

标签： angular2-template angular2-forms

【解决方案1】：

尝试在输入上设置#name="ngModel"。

然后从

中删除“ng”

<small *ngIf="name.ng-invalid">

像这样

<small *ngIf="name.invalid">

【讨论】：

【解决方案2】：

试试这个代码

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
...
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
         Name is required
    </div>

 ...   
    </form>

【讨论】：