AngularJS輸入網址無效/有效/錯誤

Question

我在angularjs中輸入類型url時出錯。如果輸入爲空或無效，我將禁用該按鈕，然後我寫下面的代碼。嗯，這是對首次Ø如果我寫一個不正確的URL正常，但如果它是空propForm.imgUrl $無效，propForm.imgUrl。$ error.url返回我假，這使按鈕

<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

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