title: How to use bootstrap 4 success and error classes with Angular 5 ngClass
body: <p>I have some problem in  my code and I'm trying to understand reason of that and where it comes from. So here I've added in is-valid and is-invalid classes to my input validators, also I've tried to use has-success and has-error classes,but as I guess it not work for bootstrap 4. This is my component.html `</p>
  
  <pre><code>&lt;h1 class="page-header"&gt;Register Page&lt;/h1&gt;
  
  &lt;!-- Registration Form --&gt;
  &lt;form [formGroup]='form' (submit)='onRegisterSubmit()'  &gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;Username&lt;/label&gt;
      &lt;div [ngClass]="{'is-invalid': (form.controls['username'].errors &amp;&amp; form.controls['username'].dirty), 'is-valid': !form.controls['username'].errors}"&gt;
        &lt;input type="text" name="username" formControlName="username" class="form-control" autocomplete="off" placeholder="*Username"&gt;
        &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls['username'].errors?.required &amp;&amp; form.controls['username'].dirty"&gt;This field is required&lt;/li&gt;
            &lt;li *ngIf="form.controls['username'].errors?.minlength &amp;&amp; form.controls['username'].dirty || form.controls['username'].errors?.maxlength &amp;&amp; form.controls['username'].dirty "&gt;Minimum characters: 3, Maximum characters: 15&lt;/li&gt;
            &lt;li *ngIf="form.controls['username'].errors?.validateUsername &amp;&amp; form.controls['username'].dirty"&gt;Username must not have any special characters&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="email"&gt;E-mail&lt;/label&gt;
      &lt;div [ngClass]="{'is-invalid': (form.controls['email'].errors &amp;&amp; form.controls['email'].dirty), 'is-valid': !form.controls['email'].errors}"&gt;
        &lt;input type="text" name="email" class="form-control" formControlName="email" autocomplete="off" placeholder="*E-mail"&gt;
        &lt;ul class="help-block"&gt;
          &lt;li *ngIf="form.controls['email'].errors?.minlength &amp;&amp; form.controls['email'].dirty || form.controls['email'].errors?.maxlength &amp;&amp; form.controls['email'].dirty "&gt;Minimum characters: 5, Maximum characters: 30&lt;/li&gt;
          &lt;li *ngIf="form.controls['email'].errors?.required &amp;&amp; form.controls['email'].dirty"&gt;This field is required&lt;/li&gt;
          &lt;li *ngIf="form.controls['email'].errors?.validateEmail &amp;&amp; form.controls['email'].dirty"&gt;This must be a valid email&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="password"&gt;Password&lt;/label&gt;
      &lt;div [ngClass]="{'is-invalid': (form.controls['password'].errors &amp;&amp; form.controls['password'].dirty), 'is-valid': !form.controls['password'].errors}"&gt;
        &lt;input type="password" name="password" formControlName="password" class="form-control" autocomplete="off" placeholder="*Password"&gt;
        &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls['password'].errors?.required &amp;&amp; form.controls['password'].dirty"&gt;This field is required&lt;/li&gt;
            &lt;li *ngIf="form.controls['password'].errors?.minlength &amp;&amp; form.controls['password'].dirty || form.controls['password'].errors?.maxlength &amp;&amp; form.controls['password'].dirty "&gt;Minimum characters: 8, Maximum characters: 35&lt;/li&gt;
            &lt;li *ngIf="form.controls['password'].errors?.validatePassword &amp;&amp; form.controls['password'].dirty"&gt;Must have at least one uppercase, lowercase, special character, and number&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="confirm"&gt;Confirm Password&lt;/label&gt;
      &lt;div [ngClass]="{'is-invalid': (form.controls['confirm'].errors &amp;&amp; form.controls['confirm'].dirty) || (form.errors?.matchingPasswords &amp;&amp; form.controls['confirm'].dirty), 'is-valid': !form.controls['confirm'].errors &amp;&amp; !form.errors?.matchingPasswords}"&gt;
        &lt;input type="password" name="confirm" class="form-control" formControlName="confirm" autocomplete="off" placeholder="*Confirm Password"&gt;
        &lt;ul class="help-block"&gt;
            &lt;li *ngIf="form.controls['confirm'].errors?.required &amp;&amp; form.controls['confirm'].dirty"&gt;This field is required&lt;/li&gt;
            &lt;li *ngIf="form.errors?.matchingPasswords &amp;&amp; form.controls['confirm'].dirty"&gt;Password do not match!&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input [disabled]="!form.valid" type="submit" class="btn btn-primary" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is my component.ts `</p>
  
  <pre><code>import { Component, OnInit, group } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
  
    form:FormGroup;
  
  
    constructor(private formBuilder:FormBuilder) {
  
      this.createForm();
     }
  
     createForm(){
      this.form=this.formBuilder.group({
        email:['',Validators.compose([
          Validators.required,
          Validators.minLength(5),
          Validators.maxLength(30),
          this.validateEmail
        ])],
        username:['',Validators.compose([
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(15),
          this.validateUsername
        ])],
        password:['',Validators.compose([
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(35),
          this.validatePassword
        ])],
        confirm:['',Validators.required]
      },{validator:this.matchingPasswords('password','confirm')});
    }
  
    validateEmail(controls){
      const regExp = new RegExp(
        /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      );
        if(regExp.test(controls.value)){
          return null;
        }else{
          return {'validateEmail':true};
        }
    }
  
    validateUsername(controls){
      const regExp = new RegExp(/^[a-zA-z0-9]+$/);
        if(regExp.test(controls.value)){
          return null;
        }else{
          return {'validateUsername':true};
        }
    }
  
    validatePassword(controls){
      const regExp = new RegExp(/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[\d])(?=.*?[\W]).{8,35}$/);
        if(regExp.test(controls.value)){
          return null;
        }else{
          return {'validatePassword':true};
        }
    }
    matchingPasswords(password,confirm){
      return (group:FormGroup)=&gt;{
        if(group.controls[password].value === group.controls[confirm].value){
          return null;
        }else{
          return {'matchingPasswords':true};
        }
      }
    }
  
    onRegisterSubmit(){
      console.log("submitted");
    }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>I need that, when user typing  something in input, it will change class to success or error. How can I do this?   </p>