Search code examples
javascriptangularjsangularjs-directivejsonschemaangular-schema-form

how to use blur event in form using angular..?

I make a form using this link

I able to validate form on button click, but there is way to validate onBlur but I didn't understand how I will achieve this.

Here is my plunker

<!DOCTYPE html>
<html >

  <head>    

  <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />


    <link rel="stylesheet" href="style.css" />

  </head>

  <body ng-app="test" ng-controller="FormController">

    <form name="ngform"
          sf-schema="schema"
          sf-form="form"
          sf-model="model"  sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}" ng-submit="onSubmit(ngform)"></form>

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//dl.dropboxusercontent.com/s/icrciconaesuw29/tv4.js?m="></script>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="//dl.dropboxusercontent.com/s/unk0id7tmc9w0mm/angular-sanitize.js?m="></script>
  <script src="//dl.dropboxusercontent.com/s/rk0dfetihiqs7bi/ObjectPath.js"></script>
  <script src="//dl.dropboxusercontent.com/s/8fq4c4t7jct4w4h/schema-form.js?m="></script>
<script type="text/javascript" src="//textalk.github.io/angular-schema-form/dist/bootstrap-decorator.min.js"></script>

<script>
angular.module('test',['schemaForm']).controller('FormController', function($scope,$http){
   $scope.schema = {
    type: "object",
    properties: {
      name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" ,required:true},
      "email": {
      "title": "Email",
      "type": "string",
      "pattern": "^\\S+@\\S+$",
       validationMessage: {
    "default": "Just write a proper address, will you?"   //Special catch all error message
  },
      "description": "Email will be used for evil.",
      required:true
    },
      title: {
        type: "string",
        required:true,
        enum: ['dr','jr','sir','mrs','mr','NaN','dj']
      }
    }
  };

  $scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

  $scope.model = {};
   $scope.onSubmit = function(form) {
    // First we broadcast an event so all fields validate themselves
    $scope.$broadcast('schemaFormValidate');

    // Then we check if the form is valid
    if (form.$valid) {
      // ... do whatever you need to do with your data.
    }
  }
})
    </script>

  </body>

</html>
Solution

  • The ngModelOptions feature has been introduced in angularjs v1.3.0-beta.6

    You have to use v1.3.0-beta.6 or newer then your plunker will just work!

    Example Plunker: http://plnkr.co/edit/ZCZAcvD2jiBUZhFEcTFA?p=preview