ngClass not working in my Angular Project

Question

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.

Answer 1

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: ''
  };