如何將後端驗證錯誤消息插入角度模式形式？

Question

我正在評估角度，正在閱讀documentation，並試圖瞭解從後端插入錯誤消息的位置（在下面的示例中 - 名稱字段中的userNameAlreadyTaken），例如來自文檔的示例，我嘗試猜測放置東西的位置：

<script> 
$(document).ready(function() { 
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 = [ 
    { 
    "key": "name", 
    "validationMessages": { 
     "userNameAlreadyTaken" 
    } 
    }, 
    {   type: "submit", style: 'btn-success', title: "Save"} 
    ]; 
    $scope.model = {}; 
    $scope.$broadcast('schemaForm.error.name','tv4-302',false); 
}); 
angular.bootstrap(document, ['myModule']); 
}); 
</script> 

<div ng-controller="FormController"> 
    <form sf-schema="schema" sf-form="form" sf-model="model" action="action_url" ></form> 
</div> 

而上面的代碼呈現窗體，但沒有錯誤消息。我期望一旦頁面被加載，「名稱」字段就是「紅色」，因爲它應該包含錯誤。角度模式形式的文檔假設人們對角度如何工作有直覺，所以代碼片段與代碼中的位置無關。而且有錯別字，如無範圍的美元和

"validationMessages": { "userNameAlreadyTaken" } 

我不知道，應該有一個列表或者是什麼？列表不起作用。事件廣播也不起作用。每個文檔都試過習慣和電視-4。

我甚至不確定我是從正確的地方撥打廣播。如果我需要從其他地方調用它，如何訪問正確的$ scope。

Answer 1

角度模式表單文檔包含錯誤。

這裏是一個工作示例：

<script> 
    $(document).ready(function() { 
    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 = [{ 
      key: "name", 
      validationMessage: { 
      userNameAlreadyTaken: "Username already taken!" 
      } 
     }, { 
      type: "submit", 
      style: 'btn-success', 
      title: "Save" 
     }]; 

     $scope.model = {}; 

     $scope.onSubmit = function(form) { 
      $scope.$broadcast('schemaForm.error.name', 'userNameAlreadyTaken', false); 
     }; 

     }); 
    angular.bootstrap(document, ['myModule']); 
    }); 
</script> 

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

主要問題是：

"validationMessages": { 
    "userNameAlreadyTaken" 
} 

這，當然，是不是有效的JavaScript，它應該是這樣的（鍵值對）：

validationMessage: { 
    userNameAlreadyTaken: "Username already taken!" 
} 

而在你的控制器中，你可以這樣做：

if (valid) { 
    $scope.$broadcast('schemaForm.error.name', 'userNameAlreadyTaken', true); 
} else { 
    $scope.$broadcast('schemaForm.error.name', 'userNameAlreadyTaken', false); 
} 

在此之前，您只需編寫與後端通信並處理響應的代碼。

另外，如果你需要，你可以添加多個郵件：

validationMessage: { 
    "userNameAlreadyTaken": "Username already taken!", 
    "someOtherMessage": "Some other validation message." 
} 
... 
$scope.$broadcast('schemaForm.error.name', "userNameAlreadyTaken", false); 
$scope.$broadcast('schemaForm.error.name', "someOtherMessage", false);