Question

将$ setPristine（）添加到函数中时，我的项目中发生了一些意外的行为。

这是HTML模板中2个相关输入框的代码，这些代码出现在下面的屏幕截图中：

<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
                            <label for="FatA" class="col-sm-2 control-label">Fat A</label>
                            <input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)', decimalCheck: 'vm.decimalCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.decimalCheck">{{vm.errorMessages.decimalCheck}}</span>
                        </div>
                        <div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
                            <label for="FatB" class="col-sm-2 control-label">Fat B</label>
                                <input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)', decimalCheck: 'vm.decimalCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.decimalCheck">{{vm.errorMessages.decimalCheck}}</span>
                        </div>

以下是“清除”按钮的代码和2个元素，它们显示模型中“公式输入”和“公式结果”的内容：

<input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />

<div>formula input: {{vm.formulaInput}}</div>
<div>formula results: {{vm.formulaResults}}</div>

这是JS文件中的清除函数：

        vm.clear = function () {            
            vm.formulaInput = {};
            vm.formulaInput.Fats = [];
            vm.formulaResults = null;            
        }

如果用户在任一输入框中输入字母而不是数字，则应该显示验证错误，如下所示：

那部分工作正常。

但是，当用户单击清除，并且JS中的清除功能如上所示时，该表单显示两个输入框都有无效的条目：

这不是用户单击“清除”后要显示的内容。应该显示的是空白表格，没有任何验证错误，因此用户可以重新开始。为了解决此问题，将$ setPristine（）添加到清除函数中：

        vm.clear = function () {            
            vm.formulaInput = {};
            vm.formulaInput.Fats = [];
            vm.formulaResults = null;
            vm.formContainer.form.$setPristine();
        }

说用户输入与上述相同的值：

现在，当用户单击“清除”时，验证错误消失，这很好，但是无效的输入不会从输入框中清除：

通过查看“公式输入”元素，我注意到，Fats数组显示空值来代替在输入框中输入的字母。也许这是这个问题的相关内容...？

使用$ setPristine（）时发生意外行为

0 个答案: