The DEMO

Question

<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
</span>

<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done
</button>

我想在未触动和按钮点击时显示消息，但它仅在触摸时显示，并且表格不得在提交时提交。

Answer 1

您可以在下面的组合中使用$submitted，但对于submit形式，您可以使用<form name="myForm" ng-submit="myForm.$valid && submitUser()"> <input type="text" ng-model="job" required class="form-control" name="job"> <span ng-show="(myForm.job.$touched || myForm.$submitted) && myForm.job.$invalid"> My Error </span> ... ... <button class="btn" type="submit">Done</button> </form>形式。所以

SSMS

Answer 2

首先将按钮代码更改为：

<button class="btn" type="button" ng-click="submitUser()">Done</button>

将您的范围代码更改为

<span ng-show="myForm.job.$touched || buttonClicked">

在您的控制器中：

$scope.buttonClicked = false; // Set it to false on initial load
$scope.submitUser = function(){
    ..................
    $scope.buttonClicked = true;
    ..................
}

Answer 3

检查一下

<input type="text" ng-model="job" required class="form-control" name="job">

<span ng-show="(myForm.job.$untouched  || myForm.$invalid)">

<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done</button>

Answer 4

您可以在输入元素中检查$touched，并使用变量点击评估按钮。

＆＃13;

var ang = angular.module("app", []);
ang.controller("ctrl", function($scope){
 $scope.submitUser =  function(){
    
 }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<div ng-app="app">
<form name="myForm">
<input type="text" name="job" ng-model="job" required class="form-control" >
<span ng-show="myForm.job.$touched ||show">Error</span>
<button class="btn" type="button" ng-click="myForm.$valid ? submitUser() : (show=true)">Done</button>
</form>
</div>

＆＃13;

Answer 5

更改按钮以设置控件的$touched状态：

<button class="btn" type="button"
        ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
</button>

然后单击按钮时将显示该消息。

The DEMO

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app>
    <h1>myForm</h1>
    <form name="myForm">
    <input type="text" ng-model="job" 
      required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
     Enter valid job
</span>

     <button class="btn" type="button"
             ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
     </button>
  </form>  
  <br>myForm.job.$touched = {{myForm.job.$touched}}
  <br>myForm.job.$invalid = {{myForm.job.$invalid}}
  </body>

在未触动的情况下显示消息并提交angularjs

5 个答案:

在您的控制器中：

The DEMO