验证失败时，第一次点击没有形成表单数据对象；仅在第二次点击时

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对象是在初始化控制器时创建的，它只是一个空对象）：

    $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 不要使用角度 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>