How can I use Typescript to check if a value is default?

Question

I want to add the has-error class of my form-group when the primary language value is set to default, and remove it when it's changed to a different value.

However, currently it only adds the has-error class when the value is changed to "English", and removes it at any other value, including default.

In order to do this I created a method that changes the hasPrimaryLanguageError attribute to true when default is set as the value, but using console.log I found that it only happens when english is selected.

How and why does this happen and how can I fix this?

Typescript file:

import {Component} from '@angular/core';
import { Employee } from '../models/employee.model';

@Component({
  selector: 'home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html'
})
export class HomeComponent {
  languages: string[] = ['English', 'Spanish', 'Dutch', 'Other'];
  model: Employee = new Employee('', 'Sun', false, 'w2', 'default');
  hasPrimaryLanguageError: boolean = false;

  validatePrimaryLanguage(event): void {
    if (this.model.primaryLanguage === 'default') {
      this.hasPrimaryLanguageError = true;
    } else {
      this.hasPrimaryLanguageError = false;
    }
    console.log('hasPrimaryLanguageError: ' + this.hasPrimaryLanguageError)
  }
}

Model:

export class Employee {
    constructor (
        public firstName: string,
        public lastName: string,
        public isFullTime: boolean,
        public paymentType: string,
        public primaryLanguage: string
    ) {

    } 
}

HTML:

<div class="container">
    <h3>Employee</h3>

    <form #form="ngForm" novalidate>
        <div class="form-group" [class.has-error]="hasPrimaryLanguageError">
            <label for="primary-language">Primary Language</label>
            <select class="form-control" id="primary-language"
                name="primaryLanguage"
                (ngModelChange)="validatePrimaryLanguage($event)"
                [(ngModel)]="model.primaryLanguage">
                <option value="default">Select a language...</option>
                <option *ngFor="let lang of languages">
                    {{ lang }}
                </option>
            </select>
        </div>

        <button class="btn btn-primary" type="submit">Ok</button>
    </form>
    Model: {{ model | json }}
    <br>
    Angular: {{ form.value | json }}
</div>

Answer 1

On @angular/forms version 5.0.0, your code is almost working. Two problems though, you are trying to check against the model

if (this.model.primaryLanguage === 'default')

instead you should check against the value in the event

if (event === 'default')

As the model has not been updated before the change event is fired.

Also regarding the has-error class: the correct syntax would be

[ngClass]="{'has-error':hasPrimaryLanguageError}"