角 - 在按一下按钮，然后下一个功能验证 [英] Angular - Validation on button click then next function

问题描述

新建角所以道歉，如果这个问题已经被问过。

我已经得到了验证领域与工作以及NG的消息（伟大的教程的这里如果任何人有兴趣）。

不过我读过/学会为止确实每当字段被感动了验证。

 ＆LT; D​​IV NG的消息={要求：！main.o1ToAdd || main.o2ToAdd}
            NG-IF =。myForm.o1 $触及|| myForm.o2 $感动＆GT;
    ＆LT;跨度NG消息=需要＆gt;您需要至少指定2'; / SPAN＆GT;
＆LT; / DIV＆GT;
 

和上输入

 ＆LT;输入名字=01NG-模式=main.o1ToAdd类型=文本占位符=是必需的
   NG-CLASS ={'invalidInputField：。myForm.o1 $感动和放大器;＆安培; myForm.o1 $无效}/＆GT;
 

不过，我真的不希望，如果用户点击一个字段出现了错误。

相反，我有一个按钮后 - 所以如果那请单击，然后应该在窗体所有的验证进行。什么我不确定是我已经有一个 NG-点击该按钮 - 我如何让它先升后如果成功做验证，与实际岗位进行功能。 （理想情况下我不想禁用即有它灰色的按钮）。

 ＆LT;按钮类=按钮NG点击=home.post（）＆GT;邮政和LT; /按钮＆GT;
 

任何帮助将是AP preciated。

感谢。

解决方案

可能帮助你。

\r

\r

angular.module（测试，[]）。控制器（TestCtrl ，功能（$范围）{\r
  \r
  $ scope.onSubmit = FALSE;\r
  $ scope.submit =功能（）{\r
    如果（！$ scope.theForm $有效）\r
      $ scope.onSubmit =真;\r
  };\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=测试NG-控制器=TestCtrl＆GT;\r
    ＆LT;表格名称=theForm＆GT;\r
      ＆LT;输入类型=文本必要的名称=foo的NG-模式=富/＆GT;\r
      ＆LT; p NG秀=的onsubmit＆放大器;及（theForm.foo $触及|| theForm.foo $有效！）＆GT;错误在富输入＆LT; / P＆GT;\r
      \r
      ＆LT;输入类型=文本必要的名称=酒吧NG模型=酒吧/＆GT;\r
      ＆LT; p NG秀=的onsubmit＆放大器;及（theForm.bar $触及|| theForm.bar $有效！）＆GT;错误在酒吧输入＆LT; / P＆GT;\r
      \r
      ＆LT;按钮NG点击=提交（）类型=按钮＆GT;提交＆LT; /按钮＆GT;\r
    ＆LT; /表及GT;\r
  ＆LT; / DIV＆GT;

\r

\r

\r

New to Angular so apologies if this question has been asked before.

I've got field validation working well with ng-messages (great tutorial here if anyones interested).

However what I've read/learnt so far does validation whenever fields are touched.

<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>

and on the inputs

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

However I dont really want an error to appear if a user clicks on a field.

Instead I have a post button - so if thats click on then should all verification across the form be made. What I'm unsure of is I already have a ng-click on that button - how do i make it do the verification first and then if successful, proceed with the actual post function. (and ideally I dont want to disable the button i.e. have it greyed out).

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

Any help would be appreciated.

Thanks.

解决方案

May be help you.

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> 

这篇关于角 - 在按一下按钮，然后下一个功能验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！