I have created an Angular reactive form and using ngClass, I add Bootstrap's has-success and has-error classes depending on whether a form field is valid or not

/*checks if data inthe field is valid or not*/
  isFieldValid(field: string) {
    let fieldValid:boolean = this.signupForm.get(field).valid && this.signupForm.get(field).touched;
    console.log("isFieldValid for "+field+" returning "+fieldValid);
    return fieldValid;
  }

  /*add css to this control depending on whether it is valid or not*/
  displayFieldCss(field: string) {
    console.log("in displayFieldCss for field "+field);
    let fieldValid:boolean = this.isFieldValid(field);
    return {
        'has-error': !fieldValid, // if fieldvalid returns false i.e. field is not valid then we want has-error css. So set it to true (opp. of fieldValid)
        'has-success': fieldValid //if fieldvalid returns true i.e. field is valid then we want has-success css. So set it to true (value of fieldValid)
        //'has-feedback': this.isFieldValid(field)
    }

HTML

  <label for="firstname" class="control-label required">First Name</label>
  <input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="displayFieldCss('firstName')" required>
  <app-show-errors [control]="signupForm.controls.firstName"></app-show-errors>

On inspecting the element in the browser, I can see that the classes are being added.

Inspect element if the field is empty

<input _ngcontent-c7="" class="form-control ng-pristine ng-invalid ng-touched has-error" formcontrolname="firstName" id="firstname" required="" ng-reflect-klass="form-control" ng-reflect-ng-class="[object Object]" ng-reflect-required="" ng-reflect-name="firstName" type="text">

Inspect element if the field is empty

<input _ngcontent-c7="" class="form-control ng-touched ng-dirty ng-valid has-success" formcontrolname="firstName" id="firstname" required="" ng-reflect-klass="form-control" ng-reflect-ng-class="[object Object]" ng-reflect-required="" ng-reflect-name="firstName" type="text">

But I don't see that input text box being bordered in red color for has-error or green color for has-success. Isn't this the default behavior of Bootstrap or do I need to provide css for this?

I have created an Angular reactive form and using ngClass, I add Bootstrap's has-success and has-error classes depending on whether a form field is valid or not

/*checks if data inthe field is valid or not*/
  isFieldValid(field: string) {
    let fieldValid:boolean = this.signupForm.get(field).valid && this.signupForm.get(field).touched;
    console.log("isFieldValid for "+field+" returning "+fieldValid);
    return fieldValid;
  }

  /*add css to this control depending on whether it is valid or not*/
  displayFieldCss(field: string) {
    console.log("in displayFieldCss for field "+field);
    let fieldValid:boolean = this.isFieldValid(field);
    return {
        'has-error': !fieldValid, // if fieldvalid returns false i.e. field is not valid then we want has-error css. So set it to true (opp. of fieldValid)
        'has-success': fieldValid //if fieldvalid returns true i.e. field is valid then we want has-success css. So set it to true (value of fieldValid)
        //'has-feedback': this.isFieldValid(field)
    }

HTML

  <label for="firstname" class="control-label required">First Name</label>
  <input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="displayFieldCss('firstName')" required>
  <app-show-errors [control]="signupForm.controls.firstName"></app-show-errors>

On inspecting the element in the browser, I can see that the classes are being added.

Inspect element if the field is empty

<input _ngcontent-c7="" class="form-control ng-pristine ng-invalid ng-touched has-error" formcontrolname="firstName" id="firstname" required="" ng-reflect-klass="form-control" ng-reflect-ng-class="[object Object]" ng-reflect-required="" ng-reflect-name="firstName" type="text">

Inspect element if the field is empty

<input _ngcontent-c7="" class="form-control ng-touched ng-dirty ng-valid has-success" formcontrolname="firstName" id="firstname" required="" ng-reflect-klass="form-control" ng-reflect-ng-class="[object Object]" ng-reflect-required="" ng-reflect-name="firstName" type="text">

But I don't see that input text box being bordered in red color for has-error or green color for has-success. Isn't this the default behavior of Bootstrap or do I need to provide css for this?

• javascript
• css
• angular
• typescript
• bootstrap-4

Share Improve this question Follow edited Oct 23, 2021 at 14:14 Vega 28.8k2828 gold badges120120 silver badges145145 bronze badges asked Feb 12, 2018 at 5:25 Manu ChadhaManu Chadha 16.8k2424 gold badges117117 silver badges245245 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It seems that in bootstrap4, has-error and has-succes were dropped. Use "is-valid" and "is-invalid" instead:

... 
return {
  'is-invalid': !fieldValid, // if fieldvalid returns false i.e. field is not valid then we want has-error css. So set it to true (opp. of fieldValid)
  'is-valid': fieldValid //if fieldvalid returns true i.e. field is valid then we want has-success css. So set it to true (value of fieldValid)
  //'has-feedback': this.isFieldValid(field)
}
...

DEMO