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