Angularjs dropdown/select 使用 ng-href 重定向的错误验证

Question

我目前正在使用 angularjs 的 ng-href 和一个带有 ng-model 的 select html 元素，我正在使用 ng-href 到 link到 "selectedItem"（来自 ng-model）。当没有选择任何东西时，我无法验证或提供错误，并且想知道我将如何做到这一点。我的 ng-href 也可以工作，我认为它在 Plunker 上没有相同的功能。

这是我的 html 代码：

 <form name="linkForm" ng-controller="MainCtrl">
  <select name="link" ng-model="selectedItem" 
      ng-options="item as item.name for item in items"></select>
      <option value=""></option>  
      <span class="error" ng-show="linkForm.link.$dirty && linkForm.link.$invalid">Please select a website</span>    
  <a ng-href="{{selectedItem.id}}">Let's go</a>
 </form>

这是我的 angularjs 代码

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

 app.controller('MainCtrl', function($scope) {
 $scope.items = [
{ id: 'http://www.google.com', name: 'Google'},
{ id: 'http://www.gmail.com', name: 'Gmail'}];
  });

这是我的演示： http://plnkr.co/edit/c9iiLP6spvQK8jYdmYhD?p=preview

Answer 1

您可以使用 ng-click 代替 link 并在控制器中处理验证。

  $scope.go = function() {
      if (!$scope.selectedItem) {
        alert("You have to select")
      } else {
        window.location.href = $scope.selectedItem.id;
      }
  }

并且在视图中：

  <a ng-click="go()">Let's go</a>

这是更新后的代码http://plnkr.co/edit/CLwFsNIUgt7PPRA3f4HA?p=preview

Answer 2

您只需要在 select 中添加 required 即可使选项成为验证所必需的。但是，您还需要删除 bankLoginForm.bankLogin.$dirty 的检查，因为在用户修改下拉列表之前它不会变脏。为了让href在下拉无效时消失，可以在其上添加相反的检查。

<select name="bankLogin" ng-model="selectedItem" 
          ng-options="item as item.name for item in items" required>
          <option value=""></option>  </select>
              <span ng-show="bankLoginForm.bankLogin.$invalid">Select bank</span>
    <a ng-href="{{selectedItem.id}}" ng-show="!bankLoginForm.bankLogin.$invalid">Let's go</a>

http://plnkr.co/edit/JFvvXslCZf9CnHCB0zRT?p=preview

Angularjs dropdown/select 使用 ng-href 重定向的错误验证

Angularjs error validation for dropdown/select redirect with ng-href

html

javascript

validation

angularjs

angularjs-ng-href