Question

我有以下表格，名称输入字段。我试图在该领域进行验证。当我打印name.className值时，它会打印ng-valid，ng-pristine和其他类。

我想使用* ngIf来显示错误消息，但它无法正常工作。

我试过* ngIf =＆＃34; name.ng-invalid＆＃34;但也没有用。谁能提出这里有什么问题？

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

Answer 1

试试此代码

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

 ...   
    </form>

Answer 2

尝试在输入上设置＃name =“ ngModel”。

然后从

中删除“ ng”

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

像这样

<small *ngIf="name.invalid">

以角度2访问模板变量className属性

2 个答案: