如何在AngularJS中进行ng-click时验证表单

Question

关于如何在必须调用方法时使html /浏览器验证在下面的代码中工作的任何想法。此外，我不能将提交类型用作方法，因为它正在其他地方使用。我想要一个替代ng-click的替代方案。

<input type="submit" ng-click="vm.submit1()" class="submitBtn" />

我想我只希望ng-click只有在ng-submit验证字段时才能工作。

Answer 1

在submit1内部，您可以查看表单。$ valid ？

<input type="button" ng-click="vm.submit1(form)" class="submitBtn" />

function YourController() {

   var self = this;
   self.submit1 = function(form) {
      if (form.$valid) { // OR self.form.$valid
         ...
      }
   }

}

Answer 2

在带有表单名称的按钮上使用它，它将保持按钮被禁用，直到表单数据被验证。

ng-disabled="frmLogin.$invalid"

这是您的帮助的正常登录表单的完整代码

<form  novalidate name="frmLogin" id="frmLogin" ng-submit="vm.doLogin()">

            <div class="form-group">
                <label>Email</label>
                <input class="form-control" type="email" name="txtusername" id="txtusername" ng-model="vm.newLogin.username"  required/>
                <span class="text-danger" ng-show="frmLogin.txtusername.$error.required">Email is required.</span>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input class="form-control" type="password" name="txtpassword" id="txtpassword" ng-model="vm.newLogin.password" required/>
                <span class="text-danger" ng-show="frmLogin.txtpassword.$error.required">Password is required.</span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default" ng-disabled="frmLogin.$invalid">Login</button>

            </div>
            <div>
                Don't have a Account? <a href="#/Register"><strong>Register Now</strong></a>
            </div>
        </form>