验证在angularjs评级指令 [英] validate the rating directive in angularjs

问题描述

我有一个创建一个等级控制和点击率它。我不想没有提交所需要验证用户评价的形式，我不知道该怎么做了一项指令，使用angularjs。

I have a directive that creates a rating control and on click rate it.I don't want to submit the form without user rating that is required validation I don't know how to do that using angularjs.

<div jb-rating ng-model="question.answer"  
    rating-value="question.answer" max="5" 
    on-rating-selected="question.answer" 
    read-only="false">
</div>

这种方式，我已经使用了指令，但不能添加所需的验证。

This way i have used the directive but unable to add required validation.

演示code是此链接：的http：// plnkr。 CO /编辑/ XZAoCYz1eyC9ulC735zS？p = preVIEW

The demo code is on this link:http://plnkr.co/edit/XZAoCYz1eyC9ulC735zS?p=preview

推荐答案

这是自定义控制一个非常好的情况下，在 NgModelController 文件的开头（记录 REF ）。你必须做出一些改变，但它的伟大工程： http://plnkr.co/edit/4hq1L5scjnQWvE6WaFyx

This is a very nice case for the custom control, documented at the beginning of the NgModelController documentation (ref). You have to make several changes, but it works great: http://plnkr.co/edit/4hq1L5scjnQWvE6WaFyx

让我们回顾一下改变：

1. 使用 NG-模型。一些子变化：

1. 无论是从孤立的范围和HTML删除的评价值。这是多余的。



2. 要求的 ngModel 在指令中定义对象。

1. Remove the rating-value both from the isolated scope and the HTML. It is redundant.

2. require the ngModel in the directive definition object.

  return {
      restrict: 'A',
      require: 'ngModel',      // ONE CHANGE IS HERE
      template: '<ul class="rating">' + ...,
      ...
      link: function (scope, elem, attrs, ngModel) { // ANOTHER HERE
          ...
      }
  };

使用 ngModel $ modelValue 而不是 scope.ratingValue ：

var updateStars = function() {
    scope.stars = [];
    for (var  i = 0; i < scope.max; i++) {
        scope.stars.push({filled: i < ngModel.$modelValue}); // CHANGE HERE
    }
};

现在实施 ngModel 界面自定义控件（ $渲染功能），并调用 $ setViewValue（）来更新模型：

Now implement the ngModel "interface" for the custom control (the $render function), and call $setViewValue() to update the model:

ngModel.$render = function() {
    updateStars();  // AS SIMPLE AS THAT!
};

scope.toggle = function(index) {
    ...
    ngModel.$setViewValue(index + 1);
    ...
};

对于要求验证，可以随角度的 NG-要求现在玩。只是覆盖 ngModel。$的isEmpty（），你认为零是空的，除了什么角度认为，这意味着空（如空）

For the "required" validation, you can play along with Angular's ng-required now. Just "override" ngModel.$isEmpty() where you consider zero to be empty, in addition to what Angular thinks that means empty (e.g. null):

var originalIsEmpty = ngModel.$isEmpty; // KEEP ORIGINAL TO FALL BACK
ngModel.$isEmpty = function(value) {
    return value === 0 || originalIsEmpty.call(ngModel,value);
};

当然，添加 NG-停用条件提交按钮：

<button type="submit" class="..."
    ng-disabled="questionForm.$invalid">Submit</button>

顺便说一句，有一个在您只读规范的错误。范围属性是只读但在HTML属性破折号：只读。无论如何，你不需要这个了，你有 NG-要求。

By the way, there is a mistake in your readonly specification. The scope property is readonly but there is a dash in the HTML attribute: read-only. Anyway, you do not need this anymore, you have ng-required.

这篇关于验证在angularjs评级指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！