我不能把CSS类放在模板上

我正在读一本关于Angular 2的书，其中一章是关于形式的。我使用的是语义UI框架，当我放置一个类时，指定div消失的错误类。很奇怪，我不知道发生了什么。我必须提到，如果我用另一个类似负数for的类替换error类，那么什么是完美的

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  AbstractControl,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'demo-form-sku-builder',
  template: `
  <div class="ui raised segment">
    <h2 class="ui header">Demo Form: Sku with Builder</h2>
    <form [formGroup]="myForm"
      (ngSubmit)="onSubmit(myForm.value)"
      class="ui form">

      <div class="field"
        [class.error]="!sku.valid && sku.touched">
        <label for="skuInput">SKU</label>
        <input type="text"
          id="skuInput"
          placeholder="SKU"
          [formControl]="myForm.controls['sku']">
        <div *ngIf="!sku.valid" 
          class="ui error message">SKU is invalid</div>
        <div *ngIf="!sku.hasError('required')"
          class="ui error message">SKU is required</div>
      </div>

    <button type="submit" class="ui button">Submit</button>
    </form>
  </div>
  `
})
export class DemoFormSkuBuilder {
  myForm: FormGroup;
  sku: AbstractControl;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'sku': ['', Validators.required]
    });

    this.sku = this.myForm.controls['sku'];
  }

  onSubmit(value: string): void {
    console.log('you submitted value: ', value);
  }
}

使用下面的代码而不是[class.error]=！sku.valid&&sku.POINTED

另一种方法是

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  AbstractControl,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'demo-form-sku-builder',
  template: `
  <div class="ui raised segment">
    <h2 class="ui header">Demo Form: Sku with Builder</h2>
    <form #myForm=ngForm
      (submit)="onSubmit(myForm.value)"
      class="ui form">

      <div class="field" 
      [ngClass]="{ 'error' : !sku.valid && sku.touched}">
        <label for="skuInput">SKU</label>
        <input type="text"
          id="skuInput"
          placeholder="SKU"
          name='sku'
          #sku='ngModel' ngModel
          required>
        <div *ngIf="!sku.valid" 
          class="ui error message">SKU is invalid</div>
        <div *ngIf="!sku.touched && !sku.errors?.required"
          class="ui error message">SKU is required</div>
      </div>

    <button type="submit" class="ui button">Submit</button>
    </form>
  </div>
  `
})
export class DemoFormSkuBuilder {

  constructor() {
  }

  onSubmit(value: string): void {
    console.log('you submitted value: ', value);
  }
}

---

这是if语句吗

<div *ngIf="!sku.hasError('required')"
      class="ui error message">SKU is required</div>

难道不是：

<div *ngIf="sku.hasError('required')"
      class="ui error message">SKU is required</div>

---

没有not运算符时？

已修复。默认情况下，除非整个表单处于相同的状态，否则语义UI会隐藏这些内容。例如，您可以创建另一个名为styles.css的css，并使用以下内容：

.ui.form .error.message,
.ui.form .success.message,
.ui.form .warning.message {
  display: block;
}

---

你能发布类“field”的详细信息吗？仍然不起作用，我认为是Typescript编译器的问题。如果我把代码放在index.html上，它就可以完美地工作

.ui.form .error.message,
.ui.form .success.message,
.ui.form .warning.message {
  display: block;
}