AngularJS 输入 url 无效/有效/错误

【问题标题】：AngularJS input url invalid/valid/errorAngularJS 输入 url 无效/有效/错误
【发布时间】：2015-01-01 16:02:58
【问题描述】：

我在 angularjs 中输入类型 url 有错误。如果输入为空或无效，我将禁用该按钮，并且我编写了下面的代码。好吧，如果我写了一个不正确的 url，第一次没问题，但如果它是空的 propForm.imgUrl.$invalid 和 propForm.imgUrl.$error.url 它返回我 false 并且这可以点击按钮

    <div class="col-sm-10">
          <input type="url" name="imgUrl" ng-model="$parent.urlImage" class="form-control">
            </div>
                <div class="pull-right col-sm-2">
                   <a href="" class="btn btn-default btn-primary" ng-disabled="propForm.imgUrl.$invalid || propForm.imgUrl.$pristine || propForm.imgUrl.$error.url" ng-click="addImage()">Add</a>
                 </div>

诀窍在哪里？a

【问题讨论】：

标签： javascript html angularjs input

【解决方案1】：

最快的方法是将required 添加到input 请看下面的演示。

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
  <div ng-controller="homeCtrl">

    <form name="propForm">
      <div class="col-sm-10">
        <input type="url" name="imgUrl" ng-model="$parent.urlImage" class="form-control" required>
      </div>
      <div class="pull-right col-sm-2">
        <a href="" class="btn btn-default btn-primary" ng-disabled="propForm.imgUrl.$invalid || propForm.imgUrl.$pristine || propForm.imgUrl.$error.url" ng-click="addImage()">Add</a>
      </div>


    </form>
  </div>
</div>

【讨论】：