Angular 2 (RC5) 中的表单验证无法按预期工作

Question

我在 Angular 2 中实现表单验证时遇到了一点麻烦。以下是详细信息。

1. Lo​​gin.ts 和 Login.html

export class CpLogin {
    public User: Login=new Login();
    constructor() {        
    }
    DoLogin() {
    }
}

<form (ngSubmit)="DoLogin()" #login="ngForm">
    <md-input [(ngModel)]="User.UserName" id="username" name="username" #uname="ngModel" required placeholder="Username" 
    maxLength="150" type="text" [dividerColor]="(!uname.valid || uname.pristine) ? 'accent':'primary'">
    </md-input>
    <div [hidden]="uname.valid || uname.pristine" class="alert alert-danger">
        Username is required.
    </div>

    <md-input [(ngModel)]="User.Password" id="password" name="password" #password="ngModel" required placeholder="Password" 
    maxLength="150" type="password" [dividerColor]="(!password.valid || password.pristine) ? 'accent':'primary'">
    </md-input>
    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
        Password is required.
    </div>
    <button type="submit" md-raised-button color="primary" [disabled]="!login.form.valid">Login</button>
</form>

登录表单截图

验证工作正常，除非加载登录表单用户名和密码文本显示为红色，用户名和密码 css 类如下所示。

class="ng-untouched ng-pristine ng-invalid"

（通过开发者工具验证）。我在这里错过了什么？

Answer 1

错误在

[dividerColor]="(!uname.valid || uname.pristine) ? 'accent':'primary'"

你需要改成什么

[dividerColor]="(!uname.valid && !uname.pristine) ? 'accent':'primary'"