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>

我的，

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)}"

仅在提交表单时显示验证 ，请查看以下plunker。

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 - Boolean根据您放置的规则判断某个项目当前是否有效。
ng-invalid - Boolean根据您放置的规则判断某个项目当前是否无效。
ng-pristine - Boolean如果表单/输入尚未使用，则为True。
ng-dirty - Boolean如果已使用表单/输入，则为True。
ng-touching - Boolean如果输入已模糊，则为True。

有关详细信息，请参阅此处

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

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

2 个答案: