title: How can I use Typescript to check if a value is default?
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>In order to do this I created a method that changes the <code>hasPrimaryLanguageError</code> attribute to true when default is set as the value, but using console.log I found that it only happens when english is selected.</p>
  
  <p>How and why does this happen and how can I fix this?</p>
  
  <p>Typescript file:</p>
  
  <pre><code>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)
    }
  }
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code>export class Employee {
      constructor (
          public firstName: string,
          public lastName: string,
          public isFullTime: boolean,
          public paymentType: string,
          public primaryLanguage: string
      ) {
  
      } 
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h3&gt;Employee&lt;/h3&gt;
  
      &lt;form #form="ngForm" novalidate&gt;
          &lt;div class="form-group" [class.has-error]="hasPrimaryLanguageError"&gt;
              &lt;label for="primary-language"&gt;Primary Language&lt;/label&gt;
              &lt;select class="form-control" id="primary-language"
                  name="primaryLanguage"
                  (ngModelChange)="validatePrimaryLanguage($event)"
                  [(ngModel)]="model.primaryLanguage"&gt;
                  &lt;option value="default"&gt;Select a language...&lt;/option&gt;
                  &lt;option *ngFor="let lang of languages"&gt;
                      {{ lang }}
                  &lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;button class="btn btn-primary" type="submit"&gt;Ok&lt;/button&gt;
      &lt;/form&gt;
      Model: {{ model | json }}
      &lt;br&gt;
      Angular: {{ form.value | json }}
  &lt;/div&gt;
  </code></pre>