Merge pull request linnovate#570 from enkodellc/patch-3

Validation Update
felipeands · Jun 7, 2014 · 2ae1b1a · 2ae1b1a
2 parents ab52c14 + 6b8635f
commit 2ae1b1a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 32 deletions.
diff --git a/packages/articles/public/controllers/articles.js b/packages/articles/public/controllers/articles.js
@@ -9,17 +9,21 @@ angular.module('mean').controller('ArticlesController', ['$scope', '$stateParams
             return $scope.global.isAdmin || article.user._id === $scope.global.user._id;
         };
 
-        $scope.create = function() {
-            var article = new Articles({
-                title: this.title,
-                content: this.content
-            });
-            article.$save(function(response) {
-                $location.path('articles/' + response._id);
-            });
+        $scope.create = function(isValid) {
+            if (isValid) {
+                var article = new Articles({
+                    title: this.title,
+                    content: this.content
+                });
+                article.$save(function(response) {
+                    $location.path('articles/' + response._id);
+                });
 
-            this.title = '';
-            this.content = '';
+                this.title = '';
+                this.content = '';
+            } else {
+                $scope.submitted = true;
+            }
         };
 
         $scope.remove = function(article) {
@@ -38,16 +42,20 @@ angular.module('mean').controller('ArticlesController', ['$scope', '$stateParams
             }
         };
 
-        $scope.update = function() {
-            var article = $scope.article;
-            if (!article.updated) {
-                article.updated = [];
-            }
-            article.updated.push(new Date().getTime());
+        $scope.update = function(isValid) {
+            if (isValid) {
+                var article = $scope.article;
+                if (!article.updated) {
+                    article.updated = [];
+                }
+                article.updated.push(new Date().getTime());
 
-            article.$update(function() {
-                $location.path('articles/' + article._id);
-            });
+                article.$update(function() {
+                    $location.path('articles/' + article._id);
+                });
+            } else {
+                $scope.submitted = true;
+            }
         };
 
         $scope.find = function() {

diff --git a/packages/articles/public/views/create.html b/packages/articles/public/views/create.html
@@ -1,15 +1,22 @@
 <section data-ng-controller="ArticlesController">
-    <form name="articleForm" class="form-horizontal col-md-6" role="form" data-ng-submit="articleForm.$valid && create()" novalidate>
-        <div class="form-group">
+    <form name="articleForm" class="form-horizontal col-md-6" role="form" data-ng-submit="create(articleForm.$valid)" novalidate>
+        <div class="form-group" ng-class="{ 'has-error' : submitted && articleForm.title.$invalid }">
             <label mean-token="'create-title'" class="col-md-3 control-label">Title</label>
             <div class="col-md-9">
-                <input type="text" class="form-control" data-ng-model="title" id="title" placeholder="Title" required>
+                <input name="title" type="text" class="form-control" data-ng-model="title" id="title" placeholder="Title" required>
+                <div ng-show="submitted && articleForm.title.$invalid" class="help-block">
+                    <p ng-show="articleForm.title.$error.required">Title is required</p>
+                </div>
             </div>
+
         </div>
-        <div class="form-group">
+        <div class="form-group" ng-class="{ 'has-error' : submitted && articleForm.content.$invalid }">
             <label mean-token="'create-content'" for="content" class="col-md-3 control-label">Content</label>
             <div class="col-md-9">
-                <textarea data-ng-model="content" id="content" cols="30" rows="10" placeholder="Content" class="form-control" required></textarea>
+                <textarea name="content" data-ng-model="content" id="content" cols="30" rows="10" placeholder="Content" class="form-control" required></textarea>
+                <div ng-show="submitted && articleForm.content.$invalid" class="help-block">
+                    <p ng-show="articleForm.content.$error.required">Content is required</p>
+                </div>
             </div>
         </div>
         <div class="form-group">

diff --git a/packages/articles/public/views/edit.html b/packages/articles/public/views/edit.html
@@ -1,15 +1,22 @@
 <section data-ng-controller="ArticlesController" data-ng-init="findOne()">
-    <form name="articleForm" class="form-horizontal col-md-6" role="form" data-ng-submit="articleForm.$valid && update()" novalidate>
-        <div class="form-group">
+    <form name="articleForm" class="form-horizontal col-md-6" role="form" data-ng-submit="update(articleForm.$valid)" novalidate>
+        <div class="form-group" ng-class="{ 'has-error' : submitted && articleForm.title.$invalid }">
             <label mean-token="'edit-title'" for="title" class="col-md-2 control-label">Title</label>
             <div class="col-md-10">
-                <input type="text" class="form-control" data-ng-model="article.title" id="title" placeholder="Title" required>
+                <input name="title" type="text" class="form-control" data-ng-model="article.title" id="title" placeholder="Title" required>
+                <div ng-show="submitted && articleForm.title.$invalid" class="help-block">
+                    <p ng-show="articleForm.title.$error.required">Title is required</p>
+                </div>
             </div>
+
         </div>
-        <div class="form-group">
+        <div class="form-group" ng-class="{ 'has-error' : submitted && articleForm.content.$invalid }">
             <label mean-token="'edit-content'" for="content" class="col-md-2 control-label">Content</label>
             <div class="col-md-10">
-                <textarea data-ng-model="article.content" id="content" cols="30" rows="10" placeholder="Content" class="form-control" required></textarea>
+                <textarea name="content" data-ng-model="article.content" id="content" cols="30" rows="10" placeholder="Content" class="form-control" required></textarea>
+                <div ng-show="submitted && articleForm.content.$invalid" class="help-block">
+                    <p ng-show="articleForm.content.$error.required">Content is required</p>
+                </div>
             </div>
         </div>
         <div class="form-group">

diff --git a/packages/articles/test/karma/controllers/articles.spec.js b/packages/articles/test/karma/controllers/articles.spec.js
@@ -121,7 +121,7 @@
                     $httpBackend.expectPOST('articles', postArticleData()).respond(responseArticleData());
 
                     // Run controller
-                    scope.create();
+                    scope.create(true);
                     $httpBackend.flush();
 
                     // test form input(s) are reset
@@ -132,7 +132,7 @@
                     expect($location.path()).toBe('/articles/' + responseArticleData()._id);
                 });
 
-            it('$scope.update() should update a valid article', inject(function(Articles) {
+            it('$scope.update(true) should update a valid article', inject(function(Articles) {
 
                 // fixture rideshare
                 var putArticleData = function() {
@@ -161,7 +161,7 @@
                 */
 
                 // run controller
-                scope.update();
+                scope.update(true);
                 $httpBackend.flush();
 
                 // test URL location to new object