Question

我使用此link

制作表单

我能够在点击按钮时验证表单，但有办法验证onBlur，但我不明白我将如何实现这一目标。

这是我的plunker

<!DOCTYPE html>
<html >

  <head>    

  <link data-require="bootstrap-css@3.x" 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>

Answer 1

angularjs v1.3.0-beta.6中的ngModelOptions功能已introduced

你必须使用v1.3.0-beta.6或更新，然后你的plunker才能正常工作！

示例Plunker： http://plnkr.co/edit/ZCZAcvD2jiBUZhFEcTFA?p=preview

如何在形式中使用模糊事件使用角度..？

1 个答案: