Question

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

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

我有这样的场景，

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

<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 () {

            }
        );
      };

Answer 1

你可以这样编写你的函数：

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

Answer 2

最佳解决方案是在img上添加隐藏的输入字段。所以你可以使用它。沿着这些方向的东西

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

表单验证到ng-click指令

2 个答案: