输入填充动态时AngularJS表单验证失败答案

【问题标题】：AngularJS form validation failing when input populated dynamic输入填充动态时AngularJS表单验证失败
【发布时间】：2017-11-23 21:31:22
【问题描述】：

我有以下表格：

如果我点击一颗星，输入将自动填充点击的星号。（点击第三颗星，输入将填充数字“3”，如下图所示）

星星下面的输入是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>

进入问题：

如果我点击一颗星并且输入动态填充一个数字，则表单无法验证，如下图所示：

我在表单有效的输入中手动输入了一个数字，我可以单击提交按钮。

但是为什么如果我在输入中手动输入一个数字，表单就会生效，我可以单击“提交”按钮，如果通过选择星号自动填充输入，则表单不会验证并且我无法点击“提交”按钮？

【问题讨论】：

标签： javascript html angularjs angular-directive angular-validation

【解决方案1】：

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

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

或

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

【讨论】：