Bootstrap validation is not working in Angular framework

Asked
Active3 hr before
Viewed126 times

9 Answers

workingframeworkangularvalidationbootstrap
90%

The value of ngModel won't be set unless it passes validation for the input field, For example: inputs of type email must have a value in the form of user@domain

Example_snippet/controller/utility/_working.js/ <div ng-controller="ExampleCon. . .
<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <label>E-mail: <input type="email" ng-model="user.email" /></label><br />
    Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label>
    <label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);
</script>
load more v
88%

This would be true if the control was invalid and false if it was valid,,Bootstrap has classes for showing visual feedback for form controls when they are invalid

Example_snippet/controller/utility/_working.js/ import { FormGroup, FormContro. . .
import {
   FormGroup,
   FormControl,
   Validators
} from '@angular/forms';
.
.
.
class ModelFormComponent implements OnInit {
   myform: FormGroup;

   ngOnInit() {
      myform = new FormGroup({
         name: new FormGroup({
            firstName: new FormControl('', Validators.required),
            (1)
            lastName: new FormControl('', Validators.required),
         }),
         email: new FormControl('', [(2)
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")(3)
         ]),
         password: new FormControl('', [
            Validators.minLength(8), (4)
            Validators.required
         ]),
         language: new FormControl()(5)
      });
   }
}
load more v
72%

Submitting the form will iterate over all controls and mark them as touched and dirty to provide feedback to the user, Additionally, there is a validSubmit event on forms which you can bind to instead of submit to only fire off when the form is actually valid

Example_snippet/controller/utility/_working.js/ import { BrowserModule } from . . .
import {
   BrowserModule
} from '@angular/platform-browser';
import {
   NgModule
} from '@angular/core';
import {
   FormsModule,
   ReactiveFormsModule
} from '@angular/forms';
import {
   AppComponent
} from './app.component';

import {
   NgBootstrapFormValidationModule
} from 'ng-bootstrap-form-validation';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      NgBootstrapFormValidationModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}
load more v
65%

An Angular module that makes Bootstrap form validation easy,,Add NgBootstrapFormValidationModule to other modules in your application:,npm i ng-bootstrap-form-validation,github

Example_snippet/controller/utility/_working.js/ import { BrowserModule } from . . .
import {
   BrowserModule
} from '@angular/platform-browser';
import {
   NgModule
} from '@angular/core';
import {
   FormsModule,
   ReactiveFormsModule
} from '@angular/forms';
import {
   AppComponent
} from './app.component';

import {
   NgBootstrapFormValidationModule
} from 'ng-bootstrap-form-validation';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      NgBootstrapFormValidationModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}
load more v
75%

Install Bootstrap UI framework via NPM using following command,,To validate the form, we will also look at how to use Bootstrap UI library to facilitate our form validation task

Example_snippet/controller/utility/_working.js/ ng new angular-template-driven. . .
ng new angular - template - driven - form
Step 2 continued with cd angular-template-driven-for. . .
cd angular - template - driven - form
Step 3 continued with npm install bootstrap. . .
npm install bootstrap
Step 4 continued with "styles": [ "src/styles.cs. . .
"styles": [
   "src/styles.css",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Step 5 continued with ng serve --open. . .
ng serve--open
load more v
40%

Get the complete example code for the reactive and template-driven forms used here to illustrate form validation, Run the live example / download example

Example_snippet/controller/utility/_working.js/ content_copy . . .
      content_copy

      <input type="text" id="name" name="name" class="form-control" required minlength="4" appForbiddenName="bob" [(ngModel)]="hero.name" #name="ngModel">

      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert">

         <div *ngIf="name.errors?.required">
            Name is required.
         </div>
         <div *ngIf="name.errors?.minlength">
            Name must be at least 4 characters long.
         </div>
         <div *ngIf="name.errors?.forbiddenName">
            Name cannot be Bob.
         </div>

      </div>
load more v
22%

For those who are interested, the codes are correct, My problem was the ngModels were undefined so I needed to do this in my component

Example_snippet/controller/utility/_working.js/ formData: PaymentDetail = { . . .
formData: PaymentDetail = {
   CVV: null,
   CardNumber: null,
   CardOwnerName: null,
   ExpirationDate: null,
   PMId: null
}
load more v
60%

pristine – gives a status about the “cleanness” of the form; true if no control was modified, pristine – gives a status about the “cleanness” of the form; true if no control was modified ,invalid – inverse of valid; true if some control is invalid, invalid – inverse of valid; true if some control is invalid

Example_snippet/controller/utility/_framework.js/ <form> <div> <label>Name. . .
<form>
   <div>
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div>
      <label>Birth Year</label>
      <input type="text" name="birthYear" />
   </div>

   <div>
      <h3>Location</h3>
      <div>
         <label>Country</label>
         <input type="text" name="country" />
      </div>
      <div>
         <label>City</label>
         <input type="text" name="city" />
      </div>
   </div>

   <div>
      <h3>Phone numbers</h3>
      <div>
         <label>Phone number 1</label>
         <input type="text" name="phoneNumber[1]" />
         <button type="button">remove</button>
      </div>
      <button type="button">Add phone number</button>
   </div>

   <button type="submit">Register</button>
   <button type="button">Print to console</button>
</form>
load more v
48%

I have upgraded to v 4,12

Example_snippet/controller/utility/_framework.js/ <form name="additem" class="ne. . .
<form name="additem" class="needs-validation" method="post" action="process....." novalidate>
   <div class="col-md-12">
      <div class="md-form">
         <input type="text" name="location" id="location" class="form-control" required>
         <label for="location">Site Location</label>
         <div class="invalid-feedback">
            Please enter a Location
         </div>
      </div>
   </div>

   <button class="btn btn-blue-grey" type="submit">Save New Call</button>