必填字段對圖像按鈕單擊上的輸入驗證

Question

驗證在button上使用typesubmit時正常工作。然而，我有一個圖像，就像我的圖像按鈕，我想在用戶點擊圖像之前填充項目名稱。有人可以幫我實現這個嗎？

<form name="userForm"> 
 
      <table> 
 
       <tr> 
 
        <td> 
 
<%-- <button type="submit" data-ng-click="addAnswers($event)" data-ng-disabled="userForm.$invalid">Save</button>--%> 
 
        <img src="/SaveBttn.png" 
 
          style="width: 100px; height: 50px;" data-ng-click="addAnswers($event)" /> 
 
        </td> 
 
        <td> 
 
         <img alt="" onclick="Close()" src="/Close.png" 
 
          style="width: 100px; height: 50px;" /> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div> 
 
      <input type="text" required name="ProjectName" placeholder="ProjectName" data-ng-model="name" maxlength="250" style="width: 400px;" /> 
 
      </div> 
 
</form>​

Answer 1

必須在addAnswers行動setvalidity。

var app = angular.module("app",[]); 
 

 
app.controller("ctrl",function($scope){ 
 
    
 
    $scope.name = ""; 
 
    $scope.addAnswers = function($event,userForm){ 
 
    
 
    if($scope.name == ""){ 
 
     $scope.userForm["ProjectName"].$setValidity('empty', false); 
 
     } 
 
    else{ 
 
     $scope.userForm["ProjectName"].$setValidity('empty', true); 
 
     
 
     } 
 
    
 
    } 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<form name="userForm"> 
 

 
       <table> 
 
        <tr> 
 
         <td> 
 
         <img src="/SaveBttn.png" 
 
           style="width: 100px; height: 50px;" data-ng-click="addAnswers($event)" /> 
 
         </td> 
 
         <td> 
 
          <img alt="" onclick="Close()" src="/Close.png" 
 
           style="width: 100px; height: 50px;" /> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
     <div> 
 
     <input type="text" required name="ProjectName" ng-model="name" placeholder="ProjectName" /> 
 
      <span ng-show="userForm.ProjectName.$error.empty">This feild is empty.</span> 
 
</div>   
 
    </form> 
 
    </div>

Answer 2

如果不工作，只是把這個包內的<a>

<a data-ng-click="addAnswers($event)" style="text-decoration: none !important"> 
    <img src="/SaveBttn.png" style="width: 100px; height: 50px;" /> 
</a>