ng-click 指令的表单验证答案

【问题标题】：Form validation to ng-click directiveng-click 指令的表单验证
【发布时间】：2017-10-04 10:06:45
【问题描述】：

我无法使用现有答案找到解决方案，因此我正在创建新帖子。

我想为按钮点击添加验证。

我有这样的场景，

我的表单有两个输入字段和一个图片上传一个，这里我们有默认图片，用户也有机会上传新的。如果用户没有上传图片，我们必须在点击提交后显示错误消息。

<div class="form-group">
          <img src="{{ImageUrl}}" class="img-responsive m-b-md" />
          <button type="button" class="btn btn-primary-outline btn-xs pull-right dash-post-button" aria-label="Post" ng-click="changeImage()">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            <small>change image</small>
          </button>
          <span ng-show="errImg">please choose the image</span>
        </div>

图片上传：

  $scope.iSupportImageUrl = "images/iceland.jpg";


      var setiSupportImageUrl = function (iSupportImgId) {
          $scope.iSupportImageUrl = AWSBucketNameConverter.getAWSURL('TELEKHA_ISUPPORT_IMG', iSupportImgId);

      };


      $scope.changeiSupportImage = function() {
        var iSupportImgUpldmodalInstance = $modal.open({
            controller: 'EventimageuploadCtrl',
            templateUrl: 'views/isupportimageupload.html',
            animation: true
        });

        iSupportImgUpldmodalInstance.result.then(
            function (result) {
            setiSupportImageUrl(result.fileId);
            result.status='a';
            result.createdTS='2014-05-04';
            result.containerName='TELEKHA_ISUPPORT_IMG';
            result.createdById=23;
            result.createdName='abc';
            $scope.newiSupport.bannerImage=result
            },
            function () {

            }
        );
      };

【问题讨论】：

那么现在的问题是什么？你在 changeImage 里面有什么
@Sajeetharan 当我点击提交时它应该显示错误消息，但现在它正在提交。
有错误就返回
@Sajeetharan 我如何为按钮添加 ng-required
@Sajeetharan 同时提交错误消息显示和表单也提交

标签： javascript angularjs forms

【解决方案1】：

你可以这样写你的函数：

$scope.changeImage = function(imageModel){
    if(imageModel){
        // upload the image
    }
    else {
        // Show up the error message
    }
  }

【讨论】：

【解决方案2】：

最好的解决方案是在您的 img 上添加一个隐藏的输入字段。所以你可以在它上面使用 required 。类似的东西

<div
    layout="column"
    flex
    ng-mouseenter="display_icon_picture = true"
    ng-mouseleave="display_icon_picture = false"
    layout-align="center center"
    class="profile-pic-container">
    <img ng-if="profile_picture_url" ngf-src="profile_picture_url">
    <img ng-if="!!!profile_picture_url" class="profile-picture" ngf-src="default_image">
    <md-icon ng-if="display_icon_picture">add_a_photo</md-icon>
</div>
<md-input-container class="form-error" id="Photo" style="font-weight:bold;">
    <input style="display: none;" type="text" ng-model="profile_picture_url" name="Photo" required aria-label="input">
    <div ng-messages="form['Photo'].$error" md-auto-hide="false">
        <div ng-message="required">Requis</div>
    </div>
</md-input-container>

【讨论】：