62 Integrate Validations with Bulma Css

62-forms-ui.md

1. Install UI Framework

npm i bulma --save npm i --save @fortawesome/fontawesome-free

2. Inlcude en Angular.json

node_modules/bulma/css/bulma.min.css node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css

3. Include markup

3.1 Inputs

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" formControlName="email">
    <span class="icon is-small is-left">
      <i class="fas fa-at"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">Success message</p>
  <p class="help is-danger">Error message</p>
</div>

3.2 Textarea

<div class="field">
  <label class="label">Texto largo:</label>
  <div class="control">
    <textarea class="textarea" cols="30" rows="10" formControlName="text"></textarea>
    {{ form.get('text').value.length }}/80
  </div>
  <p class="help is-success">This username is available</p>
</div>

3.3 Select

<div class="field">
  <label class="label">Category:</label>
  <div class="control">
    <div class="select">
      <select formControlName="category">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
        <option value="3">Category 3</option>
      </select>
    </div>
  </div>
</div>

3.3 Radio

<div class="field">
  <label class="label">Genero:</label>
  <div class="control">
    <label class="radio">
      <input type="radio" name="gender" formControlName="gender" value="male">
      Male
    </label>
    <label class="radio">
      <input type="radio" name="gender" formControlName="gender" value="female">
      Female
    </label>
    <label class="radio">
      <input type="radio" name="gender" formControlName="gender" value="other">
      Other
    </label>
  </div>
</div>

3.5 Finally

<section class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Crear producto
      </h1>
      <h2 class="subtitle">
        Forms en Angular
      </h2>
    </div>
  </div>
</section>
<div class="container">
  <section class="section">
    <form [formGroup]="form" novalidate (ngSubmit)="save($event)">
      <div class="field">
        <label class="label">Name</label>
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="text" formControlName="name" />
          <span class="icon is-small is-left">
            <i class="fas fa-user"></i>
          </span>
          <span class="icon is-small is-right">
            <i class="fas fa-check"></i>
          </span>
        </div>
        <p class="help is-success">This username is available</p>
      </div>
      <div class="field">
        <label class="label">Fecha</label>
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="date" formControlName="date" />
          <span class="icon is-small is-left">
            <i class="fas fa-calendar-alt"></i>
          </span>
          <span class="icon is-small is-right">
            <i class="fas fa-check"></i>
          </span>
        </div>
        <p class="help is-success">This username is available</p>
      </div>
      <button class="button is-primary" type="button" (click)="doSomething()">
        Action
      </button>
      <div class="field">
        <label class="label">Email</label>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-danger" type="email" formControlName="email" />
          <span class="icon is-small is-left">
            <i class="fas fa-at"></i>
          </span>
          <span class="icon is-small is-right">
            <!-- <i class="fas fa-check"></i> -->
            <i class="fas fa-times"></i>
          </span>
        </div>
        <p class="help is-success">Success message</p>
        <p class="help is-danger">Error message</p>
        <!-- <div *ngIf="emailField.errors && emailField.touched">
      <p *ngIf="emailField.hasError('required')">
        Es un campo requerido
      </p>
      <p *ngIf="emailField.hasError('email')">
        No es un email
      </p>
    </div> -->
      </div>
      <div class="field">
        <label class="label">Texto largo:</label>
        <div class="control">
          <textarea
            class="textarea"
            cols="30"
            rows="10"
            formControlName="text"
          ></textarea>
          {{ form.get("text").value.length }}/80
        </div>
        <p class="help is-success">This username is available</p>
        <!-- <div *ngIf="form.get('text').errors && form.get('text').touched">
      <p *ngIf="form.get('text').hasError('required')">
        Es un campo requerido
      </p>
      <p *ngIf="form.get('text').hasError('maxlength')">
        Te pasaste, máximo deben haber 80 caracteres.
      </p>
    </div> -->
      </div>
      <div class="field">
        <label class="label">Category:</label>
        <div class="control">
          <div class="select">
            <select formControlName="category">
              <option value="1">Category 1</option>
              <option value="2">Category 2</option>
              <option value="3">Category 3</option>
            </select>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label">Genero:</label>
        <div class="control">
          <label class="radio">
            <input
              type="radio"
              name="gender"
              formControlName="gender"
              value="male"
            />
            Male
          </label>
          <label class="radio">
            <input
              type="radio"
              name="gender"
              formControlName="gender"
              value="female"
            />
            Female
          </label>
          <label class="radio">
            <input
              type="radio"
              name="gender"
              formControlName="gender"
              value="other"
            />
            Other
          </label>
        </div>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <button class="button is-primary" type="submit">Guardar</button>
        </div>
        <div class="control">
          <button class="button is-light" type="reset">Cancelar</button>
        </div>
      </div>
    </form>
  </section>
</div>

4. Integrate Validations

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input
      class="input"
      [class.is-danger]="emailFieldIsInvalid"
      [class.is-success]="emailFieldIsValid"
      type="email"
      formControlName="email"
    />
    <span class="icon is-small is-left">
      <i class="fas fa-at"></i>
    </span>
    <span
      *ngIf="emailFieldIsInvalid; else emailCheck"
      class="icon is-small is-right"
    >
      <i class="fas fa-times"></i>
    </span>
    <ng-template #emailCheck>
      <span class="icon is-small is-right">
        <i class="fas fa-check"></i>
      </span>
    </ng-template>
  </div>
  <div *ngIf="emailFieldIsInvalid">
    <p class="help is-danger" *ngIf="emailField.hasError('required')">
      Es un campo requerido
    </p>
    <p class="help is-danger" *ngIf="emailField.hasError('email')">
      No es un email
    </p>
  </div>
</div>

<div class="field">
  <label class="label">Texto largo:</label>
  <div class="control">
    <textarea
      class="textarea"
      cols="30"
      rows="2"
      [class.is-danger]="textFieldIsInvalid"
      [class.is-success]="textFieldIsValid"
      formControlName="text"
    ></textarea>
    {{ textField.value.length }}/80
  </div>
  <div *ngIf="textFieldIsInvalid">
    <p class="help is-danger" *ngIf="textField.hasError('required')">
      Es un campo requerido
    </p>
    <p class="help is-danger" *ngIf="textField.hasError('maxlength')">
      Te pasaste, máximo deben haber 80 caracteres.
    </p>
  </div>
</div>