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

【问题标题】：How to perform validations with ngClass in angular2如何在 angular2 中使用 ngClass 执行验证
【发布时间】：2016-10-20 23:43:58
【问题描述】：

我创建了一个表单，我在其中应用了 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;
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

如图添加pristine即可，

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

仅在提交表单时显示验证请查看下面的插件。

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

【讨论】：

那行得通......但我只需要在提交表单时进行验证，我尝试了这个但没有 wrkng
[ngClass]="{errmsg: !form.controls['lastname'].valid && || (!form.controls['lastname'].pristine && form.submitted)
您只需要声明一个名为 submit 的变量，默认值为 false，单击按钮时只需将其更改为 true。并将 form.submitted 更改为仅提交。它会起作用的。
请提出单独的问题，以便其他人也可以提供帮助。几乎没有问题已经存在。
Micronycs，你能看到吗，stackoverflow.com/questions/40146587/…

【解决方案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-touched - Boolean 如果输入已经模糊，则为 True。

【讨论】：

谢谢，我想在点击按钮时显示验证
[ngClass]="{errmsg: !form.controls['lastname'].valid && || (!form.controls['lastname'].pristine && form.submitted)... ........它会工作吗
不，我认为这不是正确的方法，错误消息应该在将文本填充到文本字段时显示，而不是在单击按钮时显示
如果你真的想做同样的事情，那么在按钮点击时触发一个变量，在触发器的基础上你可以显示所有的验证一次，但这不是最好的方法。