Question

我有以下代码，它可以正常检查输入字段＆＃34; inputURL＆＃34;有一个有效的网址，如果它有锚链接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特殊属性来检查输入是否不合理。

 <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 =＆＃34; isValid（）＆＃34;。

如果输入字段不为空且一个具有有效的URL，则仅显示按钮

2 个答案: