表单在angular 2中未验证[ngClass]的用法

在Angular 2中，ngClass是一个用于动态设置HTML元素的class属性的指令。它可以根据条件来添加或移除特定的CSS类。

在表单验证方面，ngClass可以用于根据表单的验证状态来动态设置样式。通过与表单控件的valid属性结合使用，可以根据表单控件的验证状态来添加或移除CSS类。

下面是一个示例：

<form>
  <div class="form-group" [ngClass]="{'has-error': !username.valid && username.touched}">
    <label for="username">Username</label>
    <input type="text" id="username" class="form-control" required minlength="5" #username="ngModel">
    <div *ngIf="username.invalid && username.touched" class="error-message">Username is required and must be at least 5 characters long.</div>
  </div>
  
  <div class="form-group" [ngClass]="{'has-error': !password.valid && password.touched}">
    <label for="password">Password</label>
    <input type="password" id="password" class="form-control" required minlength="8" #password="ngModel">
    <div *ngIf="password.invalid && password.touched" class="error-message">Password is required and must be at least 8 characters long.</div>
  </div>
  
  <button type="submit" class="btn btn-primary" [disabled]="!username.valid || !password.valid">Submit</button>
</form>

在上面的示例中，我们使用ngClass指令来动态设置表单控件所在的div元素的class属性。当表单控件的valid属性为false且touched属性为true时，我们添加了一个名为"has-error"的CSS类，用于显示错误状态。

此外，我们还使用了模板引用变量（#username和#password）来引用表单控件，并通过它们的invalid和touched属性来判断是否显示错误消息。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。