AngularJS输入网址无效/有效/错误
问题描述:
我在angularjs中输入类型url时出错。如果输入为空或无效,我将禁用该按钮,然后我写下面的代码。嗯,这是对首次Ø如果我写一个不正确的URL正常,但如果它是空propForm.imgUrl $无效,propForm.imgUrl。$ error.url返回我假,这使按钮AngularJS输入网址无效/有效/错误
<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
答
最快的方法是将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>