僅在輸入字段不為空且具有有效URL時顯示按鈕

Question

我有以下代碼，並且可以很好地檢查輸入字段“ inputURL”是否具有有效的URL，如果它具有錨鏈接a.btn顯示，但是我也只希望它們都被填充。我可以在錨中添加ng-show來做到這一點嗎？

<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

您可以檢查兩個模型是否都已填充，如下所示：

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

或輸入的視圖值

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

Answer 2

您可以使用必需的HTML5特殊屬性來檢查輸入是否不是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>

但是，為了稍微清理一下視圖，我建議使用控制器。 公開一個函數，如果該表單有效，則該函數返回true或false。 只需使用ng-show =“ isValid（） ”。