How to use bootstrap 4 success and error classes with Angular 5 ngClass

Question

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 `

Register Page



  
    Username
    
      
      
          This field is required
          Minimum characters: 3, Maximum characters: 15
          Username must not have any special characters
        
    
  
  
    E-mail
    
      
      
        Minimum characters: 5, Maximum characters: 30
        This field is required
        This must be a valid email
      
    
  
  
    Password
    
      
      
          This field is required
          Minimum characters: 8, Maximum characters: 35
          Must have at least one uppercase, lowercase, special character, and number
        
    
  
  
    Confirm Password
    
      
      
          This field is required
          Password do not match!

And this is my component.ts `

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(
      /^(([^<>()\.,;:\s@"]+(\.[^<>()\.,;:\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)=>{
      if(group.controls[password].value === group.controls[confirm].value){
        return null;
      }else{
        return {'matchingPasswords':true};
      }
    }
  }

  onRegisterSubmit(){
    console.log("submitted");
  }
  ngOnInit() {
  }
}

I need that, when user typing something in input, it will change class to success or error. How can I do this?

Seyed-Amir-Mehrizi · Accepted Answer

i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form : in html section:

  
   
   first Name: 
   
   
   filling name is required!

in ts file, you should implement the logic to conduct the validation.

in ts file:

  myForm = new FormGroup({
  'firstName':new FormControl('',Validators.required)

  })
    //getter method
   get firstName(){
   this.myForm.get('firstName');
   }

now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:

    /// invalid
  .form-control.ng-touched.ng-invalid{border:2px solid red;}

   ///valid
    .form-control.ng-touched.ng-invalid{border:2px solid green;}

with this technique is not required that you use ng class.

How to use bootstrap 4 success and error classes with Angular 5 ngClass

Answers (1)

Related Questions