如何使用 Typescript 检查值是否为默认值？

Question

我想在主要语言值设置为默认值时添加我的表单组的 has-error class，并在更改为其他值时将其删除。

但是，目前它只在值更改为 "English" 时添加 has-error class，并在任何其他值（包括默认值）时将其删除。

为了做到这一点，我创建了一个方法，当默认值设置为值时，将 hasPrimaryLanguageError 属性更改为 true，但使用 console.log 我发现它仅在选择英语时发生.

这是怎么发生的，为什么会发生，我该如何解决？

打字稿文件：

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)
  }
}

型号：

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

在@angular/forms 版本 5.0.0 上，您的代码几乎可以正常工作。不过有两个问题，您正在尝试检查模型

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

相反，您应该检查事件中的值

if (event === 'default')

因为在触发更改事件之前模型尚未更新。

还有关于 has-error class：正确的语法是

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

如何使用 Typescript 检查值是否为默认值？

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

conditional

typescript

angular2-forms

angular