仅在输入字段不为空且具有有效URL时显示按钮

Question

I have the following code and it works fine to check if the input field "inputURL" has a valid URL, if it has the anchor link a.btn shows fine but I also only want it to show if both have been filled in. How can I add to the ng-show in the anchor to do this?

<form name="myForm" class="row inputs">
          <div class="col-xs-5">
              <label for="exampleInputPassword1">Enter a Title/Description</label>
                <input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" >
            </div>
            <div class="col-xs-5">
                <label for="exampleInputPassword1">Enter a URL</label>
                <input type="url" name="inputURL" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" >
          </div>
          <div class="col-xs-2">
              <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.inputURL.$valid  ">Post</a>
          </div>
        </form>

Answer 1

You can check if both have been filled with the model like this:

ng-show="myForm.inputURL.$valid && mvName && nvUrl"

or with the view value of the input

ng-show="myForm.inputURL.$valid && myForm.inputURL.$viewValue && myForm.urlName.$viewValue"

Answer 2

You can use the required HTML5 special attribute to check if the input is not empy.

 <form name="myForm" class="row inputs">
      <div class="col-xs-5">
          <label for="exampleInputPassword1">Enter a Title/Description</label>
            <input type="text" name="mvName id="urlName" class="form-control" placeholder=""  ng-model="mvName" required>
        </div>
        <div class="col-xs-5">
            <label for="exampleInputPassword1">Enter a URL</label>
            <input type="url" name="inputURL" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" required>
      </div>
      <div class="col-xs-2">
          <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.inputURL.$valid && !myForm.inputURL.$error.required && !myForm.mvName.$error.required">Post</a>
      </div>
    </form>

However, to clean the view a little bit, I would suggest using a controller. Expose a function which returns true or false if the form is valid. And simply use ng-show="isValid() ".