Question

我创建了一个Plunker，其中显示了一个包含所需电子邮件字段的简单表单。当用户键入电子邮件时验证有效，但是有一种方法可以在单击按钮时触发验证。我不想根据表单有效性禁用该按钮。

Answer 1

现在，您正在将ng-show绑定到用户键入时更改的数据。而是将其绑定到单击按钮时更改的数据。这是我的看法：

$scope.update = function(user) {
    $scope.isEmptyEmail = $scope.form.uEmail.$error.required;
    $scope.isInvalidEmail = $scope.form.uEmail.$error.email;
};

然后将您的数据绑定到这些新值。

  <span ng-show="isEmptyEmail">Tell us your email.</span>
  <span ng-show="isInvalidEmail">This is not a valid email.</span>

Answer 2

如果我理解正确，你有

in html：

ng-click="update(form)

在ctrl中：

 $scope.update = function(form) {
    //form.uEmail.$error.email
    //..etc
    console.log('update');
  };

并继续验证

Answer 3

我正在为自己使用这种方法。到目前为止似乎工作得很好

控制器：

$scope.update = function () {
    $('.ng-invalid').addClass('ng-touched');
    if ($scope.form.$valid) {
        /// submit
    }
}

查看：

<ng-form name='form'>
    <!-- ... -->
    <button type="button" ng-click='update()'>Submit</button>
</ng-form>

Answer 4

如果它只是表单验证，与上面类似，但更简单，更少的代码是：

<input id="id" type="text" name="inputName" required>
<span ng-show="isSubmitted && formName.inputName.$error.required">This field is required</span>
<button id="save" value="Submit" ng-click="formSubmission()">Submit</button>

并在控制器中：

$scope.formSubmission = function() {
    $scope.isSubmitted = true;
}

这样，它可以适用于每个字段，并且您不必为每个必需的输入编写代码

在ng-click上触发表单验证

4 个答案: