input field or help text doesn't turn red when field is invalid

Question

I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.

it looks like this:

<div class="form-group row"
                [ngClass]="{'has-error':    (sourcesForm.get('sourceName').touched || 
                                            sourcesForm.get('sourceName').dirty) && 
                                            !sourcesForm.get('sourceName').valid }">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" />
                    <span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.

Answer 1

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:

 <form [formGroup]="myForm">
  <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
  </div>

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:

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

and simply you can see the result.

Answer 2

This is the solution:

<div class="form-group row">
                <label class="col-md-2 col-form-label"
                        for="sourceNameId">Source Name</label>
                <div class="col-md-8">
                    <input  class="form-control"
                            [ngClass]="{'is-invalid':    (sourcesForm.get('sourceName').touched || 
                                sourcesForm.get('sourceName').dirty) && 
                                !sourcesForm.get('sourceName').valid }"
                            id="sourceNameId"
                            type="text"
                            placeholder="Source Name (required)"
                            formControlName="sourceName" >
                    <span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched || 
                                                    sourcesForm.get('sourceName').dirty) && 
                                                    sourcesForm.get('sourceName').errors">
                        <span *ngIf="sourcesForm.get('sourceName').errors.required">
                            Please enter the Source Name.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.minlength">
                            The Source Name must be longer than 3 characters.
                        </span>
                        <span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
                            The Source Name is too long.
                        </span>
                    </span>
                </div>
</div>

i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback

Answer 3

For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  "use strict";
  window.addEventListener("load", function() {
    var form = document.getElementById("needs-validation");
    form.addEventListener("submit", function(event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add("was-validated");
    }, false);
  }, false);
}());
</script>

If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

Previous answer for alpha version of Bootstrap V4 (if you must use this). On Bootstrap V4 Form Validation Docs there is the following example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

So i think you just need to change the has-error class to has-danger