Question

我正在使用一个非常简单的表单向我们的API提交内容。我使用名为Angular UI Form Validation.的指令添加了一些表单验证。我只是提交一个具有2个属性的对象; 'id'和'points'。我遇到了一个奇怪的问题，我遇到了很多麻烦，希望我能在这里得到一些帮助。

表单验证工作正常。如果我在输入字段中输入一个未通过的值，则无法在输入下方提交表单和消息，说明原因。但是，如果我然后删除了错误的输入并输入了正确的输入，则消息仍然存在。如果我单击提交按钮，消息将消失。如果我再次单击“提交”按钮，则会提交。但是，我注意到，如果我按下回车键，它会马上提交。

我在那里扔了一些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如果这不起作用，请不要使用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>

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

1 个答案: