输入填充动态时，AngularJS 表单验证失败 [英] AngularJS form validation failing when input populated dynamic

问题描述

我有以下表格:

如果我点击一颗星星，输入将自动填充被点击的星星的编号.(点击第三颗星，输入将填充数字3"，如下图所示)

星号下方的输入是 ng-required="true".

<ul class="问题列表"><li data-ng-repeat="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}}<小时><!-- 在这里替换为指令--><div data-ng-switch="question.questionType"><numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE"/>

<button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary"><span data-translate="fqApp.business.form.submit">提交</span></表单>

numericrange 指令看起来像这样:

<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"/>

进入问题:

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

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

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

解决方案

当你点击星号时，在赋值时手动使脏.

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

或

您可以使用 $setViewValue(value, trigger) 方法.当控件想要更改视图值时将调用此方法.请参阅此处

I have the following form:

If I click on a star, the input will be automatically populated with the number of the clicked star. (clicking on the 3rd star the input will be populated with number '3' like in the image bellow)

The input bellow the stars is 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>

And the numericrange directive looks like this:

<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>

Getting into the problem:

If I click on a star and the input populates dynamically with a number the form fails to validate like in the image bellow:

I manually write a number in the input the form is valid and I can click the submit button.

But why If I write manually a number in the input, the form gets valid and I can click the 'submit' button and if the input is populated automatically by selecting a star, the form does not validate and I cannot click on the 'submit' button?

解决方案

While you clicking on star, manually make dirty when value assigned.

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

or

You can use $setViewValue(value, trigger) method. This method will be called when a control wants to change the view value. Refer here

这篇关于输入填充动态时，AngularJS 表单验证失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！