Update form to show when things are invalid

twilio/app/assets/javascripts/messages.js

@@ -7,13 +7,24 @@
         $scope.baseMessages.getList().then(function(messages){
             $scope.messages = messages;
         });
+    });
 
-        this.new_message = function(message){
-            $scope.baseMessages.post(message);
-        };
+    app.directive('messageForm', function(){
+        return {
+            restrict: "E",
+            templateUrl: 'message-form.html'
+        }
     });
 
     app.controller('MessageController', function($scope, $timeout){
+        this.delete = function(message){
+            message.remove();
+        };
+
+        this.create = function(message){
+            $scope.baseMesssages.post(message);
+        };
+
         var timeout = null;
         var debounceUpdate = function(new_message, old_message){
             if(new_message == old_message){
@@ -24,7 +35,6 @@
             }
             timeout = $timeout(new_message.save, 1000);
         };
-
         $scope.$watchCollection('message', debounceUpdate);
     });
 })();

twilio/app/assets/javascripts/templates/message-form.html.haml

@@ -0,0 +1,25 @@
+.message.panel.panel-default.col-md-4{"ng-repeat" => "message in messages", "ng-controller" => "MessageController"}
+  %form{"novalidate" => true, "name"=>"message_{{message.id}}_form"}
+    .panel-heading.text-center <input placeholder="title" name="title" class="form-control" type="text" ng-model="message.title" required />
+    .panel-body
+      %span{"ng-show" => "message_{{message.id}}_form.title.$dirty && message_{{message.id}}_form.title.$invalid"} Invalid title
+      %span{"ng-show" => "message_{{message.id}}_form.body.$dirty && message_{{message.id}}_form.body.$invalid"} Invalid body
+      %span{"ng-show" => "message_{{message.id}}_form.secret.$dirty && message_{{message.id}}_form.secret.$invalid"} Invalid secret
+      .form-group
+        %label Message Body <input placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required />
+      .form-group
+        %label Message Secret <input placeholder="secret" name="secret" class="form-control" type="number" ng-model="message.secret" required />
+      .form-group
+        %label Created
+        {{message.created_at | date:"short"}}
+      .form-group
+        %label Last Updated
+        {{message.updated_at | date:"short"}}
+      .form-group
+        %label Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" required />
+      .panel.panel-default
+        .panel-heading Call Logs
+        .panel-body
+          .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}
+            .panel-heading {{log.number}}
+            .panel-body {{log.created_at | date:"short"}}

twilio/app/views/home/index.html.haml

@@ -5,26 +5,7 @@
 
 %h1.text-center Messages
 %div{"ng-app" => "messages"}
+  .new-form.text-center
+    %input{"type"=>"button", "ng-click"=>"", "value"=>"Add new message"}
   .messages{"ng-controller" => "MessagesController"}
-    .message.panel.panel-default.col-md-4{"ng-repeat" => "message in messages", "ng-controller" => "MessageController"}
-      .panel-heading.text-center <input class="form-control" type="text" ng-model="message.title" />
-      .panel-body
-        %form
-          .form-group
-            %label Message Body <input class="form-control" type="text" ng-model="message.body" />
-          .form-group
-            %label Message Secret <input class="form-control" type="text" ng-model="message.secret"/>
-          .form-group
-            %label Created
-            {{message.created_at | date:"short"}}
-          .form-group
-            %label Last Updated
-            {{message.updated_at | date:"short"}}
-          .form-group
-            %label Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" />
-      .panel.panel-default
-        .panel-heading Call Logs
-        .panel-body
-          .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}
-            .panel-heading {{log.number}}
-            .panel-body {{log.created_at | date:"short"}}
+    %message-form