2017-06-14 6 views
0

AngularJSスキーマフォームクイックスタート

<html> 
 

 
<head> 
 
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script> 
 
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script> 
 
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script> 
 

 

 

 
</head> 
 

 
<body ng-app="test" ng-cloak> 
 

 
    
 

 
<div ng-controller="FormController"> 
 
    <form name="myForm" 
 
      sf-schema="schema" 
 
      sf-form="form" 
 
      sf-model="model" 
 
      ng-submit="onSubmit(myForm)"></form> 
 
</div> 
 

 

 

 
<script type="text/javascript"> 
 

 
angular.module('myModule', ['schemaForm']); 
 

 

 
angular.module('myModule', ['schemaForm']) 
 
     .controller('FormController', function($scope) { 
 
    $scope.schema = { 
 
    type: "object", 
 
    properties: { 
 
     name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" }, 
 
     title: { 
 
     type: "string", 
 
     enum: ['dr','jr','sir','mrs','mr','NaN','dj'] 
 
     } 
 
    } 
 
    }; 
 

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

 
    $scope.model = {}; 
 
}); 
 

 

 

 
//Submit code 
 
function FormController($scope) { 
 
    $scope.schema = { 
 
    type: "object", 
 
    properties: { 
 
     name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" }, 
 
     title: { 
 
     type: "string", 
 
     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) { 
 
     alert('submitted!'); 
 
     // ... do whatever you need to do with your data. 
 
    } 
 
    } 
 
} 
 

 
</script> 
 
</body> 
 

 

 

 

 

 

 

 

 
</html>

私は、クイックスタートガイドに従って、最大取得しようと実行しているが、私は任意の成功を持っているように見えるいけないのです。私はガイドに従った。すべてが含まれ

https://github.com/json-schema-form/angular-schema-form

があります。しかし、私はコンソールに入っています。

angular.js:38 Uncaught Error: [$injector:modulerr] 
    http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=test&p1=Error%3A%20…gular-schema-form%2Fbower_components%2Fangular%2Fangular.min.js%3A22%3A179) 
at angular.js:38 
at angular.js:4920 
at q (angular.js:403) 
at g (angular.js:4880) 
at eb (angular.js:4802) 
at c (angular.js:1914) 
at Sc (angular.js:1935) 
at ue (angular.js:1820) 
at angular.js:33367 
at HTMLDocument.b (angular.js:3431) 

これはまったく新しいものです。いくつかの質問がありますが、完全な実例はありません。

答えて

1

[OK]問題を修正しました。角度が正しく初期化されていないようです。

ng-app="test" 

は私も提出する部分の重複コードを取り出している

ng-app="myModule" 

であるべき。クイックスタートは... 1の角度と知識が豊富であると、正しいNG-appタグの中に以下の完全なコードを置くと仮定し

<html> 
 

 
<head> 
 
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script> 
 
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script> 
 
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script> 
 
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script> 
 

 

 

 
</head> 
 

 
<body ng-app="myModule" ng-cloak> 
 

 
    
 

 
<div ng-controller="FormController"> 
 
    <form name="myForm" 
 
      sf-schema="schema" 
 
      sf-form="form" 
 
      sf-model="model" 
 
      ng-submit="onSubmit(myForm)"></form> 
 
</div> 
 

 

 

 
<script type="text/javascript"> 
 

 
angular.module('myModule', ['schemaForm']); 
 

 

 
angular.module('myModule', ['schemaForm']) 
 
     .controller('FormController', function($scope) { 
 
    $scope.schema = { 
 
    type: "object", 
 
    properties: { 
 
     name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" }, 
 
     title: { 
 
     type: "string", 
 
     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) { 
 
     alert('submitted!'); 
 
     // ... do whatever you need to do with your data. 
 
    } 
 
    } 
 
}); 
 

 

 

 
    
 

 

 
</script> 
 
</body> 
 

 

 

 

 

 

 

 

 
</html>