CODEWITHSUNDEEP
cssangulartypescript
Miguel Barra
Miguel Barra

Reputation: 1

I can't put a CSS class on a template

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

Upvotes: 0

Views: 175

Answers (3)

Miguel Barra
Miguel Barra

Reputation: 1

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

Upvotes: 0

DeborahK
DeborahK

Reputation: 60518

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?

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58543

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

Upvotes: 0

Related Questions