1

我有以下形式:
enter image description here
如果我点击一个明星,输入会自动与点击星号填充。 (第3恒星输入将与数来填充点击“3”像在图像波纹管)AngularJS表单验证时输入动态填充失败

enter image description here
波纹管的星星的输入是ng-required="true"

<form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()"> 
    <ul class="question-list"> 
     <li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id "> 
      <small class="label label-primary pull-right">{{question.questionTypeName}}</small> 
      <h3> 
       <b>{{$index +1 }}.</b>&nbsp;{{question.questionBody}} 
      </h3> 
      <hr> <!-- Replace here with directives --> 
      <div data-ng-switch="question.questionType"> 
       <numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE" /> 
      </div> 
     </li> 
    </ul> 
    <button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary"> 
     <span data-translate="fqApp.business.form.submit">Submit</span> 
    </button> 
</form> 

而且numericrange指令如下:

<div class="row"> 
    <div class="col-md-2" ng-if="!completed"> 
     <div> 
      <span ng-mouseover="showHovered($event)" ng-mouseleave="clearStars($event)" ng-click="selectStar($event)" 
       data-ng-repeat="sym in range(startNonActive(question), question.maxValue, 1)" class="{{question.symbol}} starred-element" value="{{$index}}"> 
      </span> 

      <input type="number" name="{{question.id}}" 
        data-ng-model="question.numericValue" 
        data-ng-value="numberOfSelectedStars" ng-required="true" /> 
     </div> 

    </div> 
</div> 

进入的问题:

如果我点击一个明星和输入与一些动态填充表单失败验证像在图像波纹管:

我在输入框中手动编写一个数字,表单有效,我可以点击提交按钮。

但是为什么如果我手动在输入中编写一个数字,表单会变得有效,我可以点击'submit'按钮,如果输入是通过选择一个星号自动填充的,表单不会生效,我不能点击'提交'按钮?

回答

6

当你点击星号时,当赋值时手动弄脏。

angular.forEach($scope.form.$error.required, function(field) { 
    field.$setDirty(); 
}) 

可以使用$setViewValue(value, trigger)方法。当控件想要更改视图值时,将调用此方法。 参考here