Question

当button与type submit一起使用时，验证工作正常。但是，我有一个像我的图像按钮的图像，我希望在用户点击图像之前填充项目名称。有人可以帮我解决这个问题吗？

  <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

如果这不起作用，只需将其包装在<a>

中

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

Answer 2

你必须在addAnswers行动中设定有效性。

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>

必填字段对图像按钮单击输入进行验证

2 个答案: