如何在angular2中使用ngClass执行验证

Question

我创建了一个表单，在其中应用ngclass在未提供表单值时显示错误，但是不幸的是，在第一次加载表单时它显示了错误。

因此，默认情况下，在加载表单时，我的输入标签无效，因此显示错误，我不确定该怎么办。

有人可以帮我吗。

我的HTML，

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin adminloginform" novalidate>
    <label class="col-sm-4 text-right norightpadding">First Name</label>
      <div class="input-group" [ngClass]="{errmsg: !form.controls['lastname'].valid }" >
        <input type="text" [formControl]="form.controls['lastname']" >
      </div>
    <div class="col-sm-8">
              <button type="submit" >Register now</button>
            </div>

我的ts

export class SignUp {

constructor(public fbld: FormBuilder, http: Http, public config: Config, public router: Router) {
    this.http = http;
    this.form = fbld.group({
        firstname: ['', Validators.required],
    });
    this.header = this.config.header1;
}

onSubmit(form: ISignup): any {

    var headers = new Headers();
    headers.append('Content-Type', 'application/json')
    this.http.post(this.header + 'signup', form, { headers: headers })
        .subscribe(
        response => {
            if (response.json().error_code == 0) {
                this.router.navigate(['/login']);
            }
            else {
                console.log(response.json().message);
            }
        });
}

我的CSS

    .errmsg{
    border: 1px solid red;
}

Answer 1

只需添加pristine ，如图所示，

[ngClass]="{errmsg: (!form.controls['lastname'].valid &&
                     !form.controls['lastname'].pristine)}" 

仅在提交表单后才显示验证 ，请在下方检查。

https://plnkr.co/edit/mJFftirG3ATDpnJRWmKN?p=preview

Answer 2

试试这个代码

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin adminloginform" novalidate>
    <label class="col-sm-4 text-right norightpadding">First Name</label>
    <div class="input-group" [ngClass]="{'errmsg': !form.controls['lastname'].valid, 'errmsg' : !form.controls['lastname'].pristine }">
        <input type="text" [formControl]="form.controls['lastname']">
    </div>
    <div class="col-sm-8">
        <button type="submit">Register now</button>
    </div>
</form>

表单验证类适用于以下情况

• ng-valid-布尔值根据您放置的规则告诉项目当前是否有效。

• ng-invalid-布尔值根据您放置的规则告诉项目当前是否无效。

• ng-pristine-布尔值如果尚未使用表单/输入，则为True。

• ng-dirty-布尔值如果使用了表单/输入，则为True。

• ng-touched-布尔值如果输入模糊，则为True。

欲了解更多信息，请点击这里

https://scotch.io/tutorials/angularjs-form-validation