Question

在我的Angular应用程序中，我需要根据是否已触摸FormControl，是否脏污，无效等来添加/删除CSS类。

我正在使用ngClass指令执行此操作：

#include <stdio.h>
int sum(int n);
int main() {

    int n, input, sum;
    sum = 0;
    scanf("%d", &n);
    for (n = 0; n <= input; n++) {
        sum += n;
    }
    printf("%d", sum);
    return 0;
}

int sum(int n) {
    int i, n, sum = 0;
    scanf("%d", &n);
    for (i = 1; i <= n; i += 1){
        sum += i;
    }   
return n;
}

这是我目前在打字稿中所拥有的：

<div class="form-group has-required"
    [ngClass]="{'has-error':
        (conditionsForm.get('acceptTerms').touched || conditionsForm.get('acceptTerms').dirty)
         && conditionsForm.get('acceptTerms').errors}">
</div

由于以上条件相当长，我想将其移入我的Typescript文件中。

是否有执行此操作的特定方法？我不确定该怎么做。有人可以告诉我我应该怎么做吗？

非常感谢！

Answer 1

您可以将其包装到组件中的函数中

public _hasErrorClass(): boolean {
  return (this.conditionsForm.get('acceptTerms').touched || this.conditionsForm.get('acceptTerms').dirty)
         && this.conditionsForm.get('acceptTerms').errors;
}

然后在模板中使用它：

<div class="form-group has-required" [ngClass]="{'has-error': _hasErrorClass()}"></div>

Answer 2

您可以尝试另一种方法：Angular OOTB分配了诸如ng-dirty，ng-touched，ng-invalid之类的形式控件，您可以在组件的样式表中为其设置样式。

input.ng-invalid.ng-dirty {
  // style definition here
}

Answer 3

我认为您无需同时检查脏污和触碰。查看反应式表单文档-https://angular.io/guide/reactive-forms

<div class="form-group has-required"
    [ngClass]="{'has-error':  conditionsForm.acceptTerms.touched && conditionsForm.acceptTerms.errors}">
</div>

Answer 4

我将对此适用于所有formControls：

public hasError(formControlName: string): boolean {
 if (this.user.get(formControlName).errors) {
  return true;
 }
 else {
  return false;
 }
}

HTML代码：

<div [ngClass]="{'has-error': hasError('acceptTerms')}">
// Other HTML
</div>

因此，在使用其他表单控件的情况下，您可以轻松地将其用作：

<div [ngClass]="{'has-error': hasError('another_formcontrol')}">
 //
</div>

Working_Demo

如何将条件错误检查从NgIf移到打字稿文件？

4 个答案: