Question

Angular的新人如果之前已经问过这个问题，那么道歉。

我已经通过ng-messages（很棒的教程here进行了现场验证，如果感兴趣的话）。

然而，无论何时触摸字段，我到目前为止所读取/学习的内容都会进行验证。

<div ng-messages="{ required: !main.o1ToAdd || !main.o2ToAdd }"
            ng-if="myForm.o1.$touched || myForm.o2.$touched">
    <span ng-message="required">you need to specify at least 2</span>
</div>

和输入

<input name="o1" ng-model="main.o1ToAdd" type="text" placeholder="Yes" required
   ng-class="{ 'invalidInputField': myForm.o1.$touched && myForm.o1.$invalid }"/>

但是，如果用户点击某个字段，我真的不希望出现错误。

相反，我有一个帖子按钮 - 所以如果那个点击，那么应该在表格上进行所有验证。我不确定的是，我已经在该按钮上有ng-click - 如何让它先进行验证然后如果成功，继续执行实际的后期功能。（理想情况下，我不想禁用该按钮，即将其显示为灰色）。

<button class="button" ng-click="home.post()">Post</button>

任何帮助都将不胜感激。

感谢。

Answer 1

可以帮到你。

angular.module("test", []).controller("TestCtrl", function($scope) {
  
  $scope.onSubmit = false;
  $scope.submit = function() {
    if(!$scope.theForm.$valid)
      $scope.onSubmit = true;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test" ng-controller="TestCtrl">
    <form name="theForm">
      <input type="text" required name="foo" ng-model="foo" />
      <p ng-show="onSubmit && (theForm.foo.$touched || !theForm.foo.$valid)">error at foo input</p>
      
      <input type="text" required name="bar" ng-model="bar" />
      <p ng-show="onSubmit && (theForm.bar.$touched || !theForm.bar.$valid)">error at bar input</p>
      
      <button ng-click="submit()" type="button">Submit</button>  
    </form>
  </div>

Angular - 按钮上的验证单击然后单击下一个功能

1 个答案: