I can't put a CSS class on a template - css

Question

I'm reading a book about Angular 2 and one of the chapters is about Forms. I'm using Semantic UI Framework and when I put a class, specify the "error" class the div is disappear. Is very very strange I don't know what happened. I have to mention what works perfectly if I replace "error" class with another like "negative" for instead.
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);
}
}

Answer 1

Is this if statement backwards?
<div *ngIf="!sku.hasError('required')"
class="ui error message">SKU is required</div>
Shouldn't it be:
<div *ngIf="sku.hasError('required')"
class="ui error message">SKU is required</div>
Without the not operator?

Answer 2

Use below code instead of [class.error]="!sku.valid && sku.touched"
<div class="field" [ngClass]="{ 'error' : !sku.valid && sku.touched}">
For more detail
Another way of doing is
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);
}
}

Answer 3

Fixed. by default, semantic UI hides these unless the whole form is in the same state. You can create an another css called styles.css for example and use this:
.ui.form .error.message,
.ui.form .success.message,
.ui.form .warning.message {
display: block;
}