Question

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

但是，目前只有在将值更改为＆＃34;英语＆＃34;时才会添加has-error类，并将其删除为任何其他值，包括默认值。

为了做到这一点，我创建了一个方法，当默认值设置为值时，将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类：正确的语法是

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

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

1 个答案: