有效和无效的表单验证 class

Question

我有一个带有表单验证的大表单，我想像异步一样对用户输入进行验证。我已经完成了我想要的一个字段的验证，但是如果我有多个字段，我不知道如何验证单个字段。

这是我尝试过的示例代码：

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" formControlName="firstname" (blur)="validcls()" (keyup)="validcls()" [class.valid]="validclass" [class.invalid]="invalidclass">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" formControlName="password">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>

validcls(){
    if (this.form.controls.firstname.valid){
      this.validclass = true;
      this.invalidclass = false;
    }
    else if (this.form.controls.firstname.invalid || 
      this.form.controls.firstname.touched){
      this.validclass = false;
      this.invalidclass = true;
    }
  }

您可以在此处查看完整的工作示例：

https://stackblitz.com/edit/angular-vfz58j?file=app%2Fapp.component.ts

Answer 1

[class.valid]="this.form.controls.firstname.valid"

和

[class.invalid]="this.form.controls.firstname.touched && this.form.controls.firstname.invalid"

就是这样。更改每个输入的控件名称。请注意，我修改了第二个条件，因为我相信这是您想要的行为。当然，如果不是这种情况，您可以修改它以满足您的需要。

Answer 2

你可以使用 ngClass 实现它，不需要 keyup 函数。

html

<section class="sample-app-content">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" formControlName="firstname" 
            [ngClass]="{'valid':form.get('firstname').valid,
            'invalid':form.get('firstname').invalid}">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" formControlName="password" [ngClass]="{'valid':form.get('password').valid,
            'invalid':form.get('password').invalid}">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>
</section>

演示 stackblitz https://stackblitz.com/edit/angular-h9t56r?file=app%2Fapp.component.html

有效和无效的表单验证 class

Form Validation with valid and invalid class

angular

angular-reactive-forms