ngClass not working in my Angular Project

问题

I'm trying to make a form with validation, and I am using the following interface to define FieldError.

export interface FieldError {
  errorAt: string;
  errorMessage: string;
}

In my component.html I am using [ngClass] to check if the FieldError.errorAt === 'first_name' I want to use text-danger and if not I want to use text-muted.

It looks like following

<div class="form-group text-left">
    <label [ngClass]="{'text-danger':FieldError.errorAt==='first_name','text-muted':FieldError.errorAt!=='first_name'}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name'>
    <small class="text-danger"> First-Name is Required </small>
</div>

I understand I can use that, the tertiary operator for ?:, but even that is not working.

Also My ngOnInit has following code:

ngOnInit(): void {
    this.FieldError.errorAt = '';
    this.FieldError.errorMessage = '';
}

***Note: *** Those are bootstrap classes.

回答1:

When using interfaces, it defines the type of a variable.

public formField: FieldError = {errorAt: '', errorMessage: ''};

Then you can use it in ngClass

<div class="form-group text-left">
    <label [ngClass]="{'text-danger': formField.errorAt==='first_name','text-muted': formField.errorAt!=='first_name'}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name'>
    <small class="text-danger"> First-Name is Required </small>
</div>

The best thing to do would be to use a named variable on the template and then use the template variables to check for validation.

https://angular.io/guide/form-validation#validating-input-in-template-driven-forms

<div class="form-group text-left">
    <label [ngClass]="{'text-danger': fname.invalid,'text-muted': fname.invalid}">First name*</label>
    <input type="text" class="form-control" [(ngModel)]='first_name' #fname="ngModel">
    <small class="text-danger"> First-Name is Required </small>
</div>

回答2:

Try using ternary operator like below

<i class="fa fa-lg fa-fw" [ngClass]="{
'fa-check-square text-primary': collection.includes(vendor.id),
'fa-window-close text-danger': !collection.includes(vendor.id)
}"></i>

回答3:

Form de docs:

The CSS classes are updated as follows, depending on the type of the expression evaluation:

• string - the CSS classes listed in the string (space delimited) are added,

• Array - the CSS classes declared as Array elements are added,

• Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

when we use some like

[ngClass]="{'text-danger': fname.invalid,'text-muted': !fname.invalid}"

you're using ngClass as "object" (the expresion result(*) is an object), see that the way is {'name class':condition,...}

If you use some like

[ngClass]="fname.invalid?'text-danger':'text-muted'"

you're using ngClass as "string" (the expresion result(*) is a string) -see that has no { }-

(*) the expresion enclosed by doble quotes

回答4:

Ok, So I put a little more time on it, in addition to the last one hour.

So the FieldError is an interface and this is the reason that it is not initializing itself, i.e. It should not even have the value.

I need to simply use a Component level object like following, rather than the interface.

  FieldError = {
    errorAt: '',
    errorMessage: ''
  };

来源：https://stackoverflow.com/questions/63008176/ngclass-not-working-in-my-angular-project