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

Question

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

1. Login.ts anf Login.html
＆＃13;
＆＃13;
export class CpLogin {
    public User: Login=new Login();
    constructor() {        
    }
    DoLogin() {
    }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

登录表单截图

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

class =＆＃34; ng-untouched ng-pristine ng-invalid＆＃34;

（从开发人员工具验证）。我在这里缺少什么？

Answer 1

错误在

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

您需要更改为

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