如何防止用户表单忽略angularjs中的提示angular-ui-bootstrap uib-typeahead

• Z时代
• 2024-01-10
• 分类：问答

我正在使用AngularJS v1.6.6和angular-ui-bootstrap版本：2.5.0创建自动填充字段。如何防止用户表单忽略angularjs中的提示angular-ui-bootstrap uib-typeahead

它一切正常，但我需要一种方式来确保用户实际上从建议列表中选择选项。

这里是我的代码：

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
<h4>How to prevent user from typing the whole word ignoring suggestions?</h4> 
<div>Model: 
<pre>{{selected | json}}</pre> 
</div> 
<form role="form" name="chooseStateForm" autocomplete="off" novalidate> 
    <div class="form-group required"> 
     <div> 
      <label for="state" class="control-label col-sm-3">Choose a State:</label> 
       <input type="text" 
         class="form-control" 
         required 
         placeholder="Try typing the whole name of the state ignoring suggestion" 
         name="state" 
         ng-model="selected" 
         uib-typeahead="option as option.name for option in states | filter:{name: $viewValue}" 
         typeahead-min-length="1" 
         typeahead-no-results="noresults" 
         typeahead-show-hint="true" 
         > 
     </div> 
     <div ng-if="noresults"> 
     <p>No match found!</p> 
     </div> 
    </div> 
</form> 
<br><br><br><br> 
<div> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="chooseStateForm.$invalid">OK</button> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
</div> 

JS：

angular.module('app', ['ui.bootstrap']); 
angular.module('app').controller('TypeaheadCtrl', function($scope) { 
$scope.selected = undefined; 
$scope.states = [ 
{id: 1, name: 'Alabama'}, 
{id: 2, name: 'California'}, 
{id: 3, name: 'Delaware'}, 
{id: 4, name: 'Florida'}, 
{id: 5, name: 'Georgia'}, 
{id: 6, name: 'Hawaii'}, 
{id: 7, name: 'Idaho'}, 
{id: 8, name: 'Kansas'}, 
{id: 9, name: 'Louisiana'}, 
{id: 10, name: 'Maine'}, 
{id: 11, name: 'Nebraska'}, 
{id: 12, name: 'Ohio'}, 
{id: 13, name: 'Pennsylvania'}, 
{id: 14, name: 'Rhode Island'}, 
{id: 15, name: 'South Carolina'}, 
{id: 16, name: 'Tennessee'}, 
{id: 17, name: 'Utah'}, 
{id: 18, name: 'Vermont'}, 
{id: 19, name: 'Washington'} 
]; 
}); 

看到这个的jsfiddle，你会明白我的意思：http://jsfiddle.net/elenat82/yhpbdvva/20/

例如，如果用户想要选择俄亥俄州，由于只有4个字母，他可能会发现输入“俄亥俄州”比选择建议的选项更容易。

但是这样做，我的模型变成了一个字符串，虽然它是一个对象，如果他从建议列表中选择。

是的我在我的控制器中检查模型的有效性，但我希望在用户提交表单之前完成它，我想显示一条错误消息向用户解释他做错了什么。

---------- ----------编辑

我找到了另一种方式来达到同样的效果，但使用的指令和扩展$验证对象。

这里是链接到更新的jsfiddle：http://jsfiddle.net/elenat82/fL5fw1up/2/

这里是更新后的代码：

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
<h4>How to prevent user from typing the whole word ignoring suggestions?</h4> 
<div>Model: 
<pre>{{selected | json}}</pre> 
<div>Errors: 
<pre>{{chooseStateForm.state.$error | json}}</pre> 
</div> 
<form role="form" name="chooseStateForm" autocomplete="off" novalidate> 
    <div class="form-group required"> 
     <div> 
      <label for="state" class="control-label col-sm-3">Choose a State:</label> 
       <input type="text" 
         class="form-control" 
         required 
         placeholder="Try typing the whole name of the state ignoring suggestion" 
         name="state" 
         ng-model="selected" 
         uib-typeahead="option as option.name for option in states | filter:{name: $viewValue}" 
         typeahead-min-length="1" 
         typeahead-no-results="noresults" 
         typeahead-show-hint="true" 
         object 
         > 
     </div> 
     <div ng-if="noresults"> 
     <p>No match found!</p> 
     </div> 
    </div> 
</form> 
<br><br><br><br> 
<div> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="chooseStateForm.$invalid">OK</button> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
</div> 

JS：

angular.module('app', ['ui.bootstrap']); 
angular.module('app').controller('TypeaheadCtrl', function($scope) { 
$scope.selected = undefined; 
$scope.states = [ 
{id: 1, name: 'Alabama'}, 
{id: 2, name: 'California'}, 
{id: 3, name: 'Delaware'}, 
{id: 4, name: 'Florida'}, 
{id: 5, name: 'Georgia'}, 
{id: 6, name: 'Hawaii'}, 
{id: 7, name: 'Idaho'}, 
{id: 8, name: 'Kansas'}, 
{id: 9, name: 'Louisiana'}, 
{id: 10, name: 'Maine'}, 
{id: 11, name: 'Nebraska'}, 
{id: 12, name: 'Ohio'}, 
{id: 13, name: 'Pennsylvania'}, 
{id: 14, name: 'Rhode Island'}, 
{id: 15, name: 'South Carolina'}, 
{id: 16, name: 'Tennessee'}, 
{id: 17, name: 'Utah'}, 
{id: 18, name: 'Vermont'}, 
{id: 19, name: 'Washington'} 
]; 
}); 
angular.module('app').directive('object', [function() { 
return { 
    restrict: 'A', 
    scope: {}, 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 
     ngModel.$validators.object = function(modelValue,viewValue){ 
      if (angular.isObject(modelValue)) { 
       return true; 
      } 
      else { 
       return false; 
      } 
      }; 
    } 
}; 
} 
]); 

回答：

$scope.isSelected = function() { 
    return typeof $scope.selected == "object"; 
} 

回答：

<input type="text" 
    class="form-control" 
    required 
    name="state" 
    ng-model="selected" 
    ..... 
    ng-change="testIncluded(selected)"> 

$scope.testIncluded = function(value) { 
    let isSelectedFromStates = $scope.states.find((state) => { 
     return state.name === value; 
    }) 
    /// do something ... 
} 

回答：

以上是 如何防止用户表单忽略angularjs中的提示angular-ui-bootstrap uib-typeahead 的全部内容， 来源链接： utcz.com/qa/263302.html