javascript - 验证失败时，首次点击时不会形成表单数据对象；仅在第二次单击时

Question

我正在使用一个非常简单的表单向我们的 API 提交一些内容。我使用名为 Angular UI Form Validation. 的指令添加了一些表单验证。我只是提交一个具有 2 个属性的对象； “id”和“点”。我遇到了一个奇怪的问题，一直难以解决，希望我能在这里得到一些帮助。

表单验证工作正常。如果我在输入字段中输入的值未通过，则您无法提交表单，并且输入下方会出现一条消息，说明原因。但是，如果我删除不正确的输入并输入正确的输入，该消息仍然存在。如果我点击提交按钮，该消息就会消失。如果我再次单击提交按钮，它就会提交。但是，我注意到，如果我只按 Enter 键，它会立即提交。

我在其中放入了一些 console.log，看起来问题是第一次单击时没有创建 formData 对象；仅在第二个。这是 HTML:

<form name="pointsField">
    <p><input type="number" ng-model="formData.points"
        validation-only-numbers="true"
        validation-field-required="{message:'Points value is required.',value:true}"
        min="0"/></p>
    <p><button class="btn btn-success" type="button" ng-click="updatePoints(pointsField)" ng-disabled="loading">
        <span ng-if="loading"><i class="fa fa-circle-o-notch fa-la fa-spin"></i></span>Update Points
    </button></p>
</form>

这是 Javascript(请记住，formData 对象是在 Controller 初始化时创建的，它只是一个空对象):

    $scope.updatePoints = function(formData) {
        console.log('formData ', formData);
        $scope.$broadcast('runCustomValidations');
        if(formData.$invalid){
            return;
        }
        var pointsObject = {
            "id": $scope.userId,
            "points": $scope.formData.points
        };
        $scope.loading = true;
        User.updateUserPoints(pointsObject).then(function(response) {
            if(response.success) {
                Notification.now.success(response.message);
                $scope.loading = false;
            } else {
                Notification.now.error(response.message);
                $scope.loading = false;
            }
        }, function(reason) {
            Notification.now.error(reason.message);
            $scope.loading = false;
        });
    };

如果有人能帮助我，我将永远感激不已。谢谢!

Answer 1

尝试在表单标记中添加 novalidate 如果这不起作用，请不要使用 Angular ui 表单验证，只需使用以下格式进行验证。

<form name="pointsField" novalidate>

   <input type="text" id="username" name="username" placeholder="Email Address"
                   ng-model="user.username" autocomplete="off" required >
   <span class="text-danger" ng-show="pointsField.username.$dirty && pointsField.username.$invalid">
                    <span ng-show="pointsField.username.$error.required">Email Address is required</span>
                  </span>


    <button type="submit" class="submit center" ng-disabled="pointsField.$invalid || dataLoading ">

<form>