javascript - 使用 ng-href 进行下拉/选择重定向的 Angularjs 错误验证

Question

我目前正在使用 angularjs 的 ng-href 和带有 ng-model 的 select html 元素，我正在使用 ng-href 链接到“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

您只需要将 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