góc chọn $ xác nhận đã chạm vào

Question

Tôi có một biểu mẫu với select và một nút được bật khi biểu mẫu được xác thực. Nó hoạt động tốt với hộp đầu vào. Tuy nhiên, nó $ chạm dường như không hoạt động đúng cho lựa chọn. Nút được bật ngay cả khi chọn được chạm. Nó được cho là biến không hợp lệ khi chọn được chạm vào. Nó chỉ biến không hợp lệ và nút bị tắt khi tôi chọn một tùy chọn và sau đó chọn giá trị mặc định. Tôi muốn nó hoạt động khi chọn được chạm và sử dụng con trỏ chuột. Dưới đây là html của tôi:

<form role="form" name="frameVersionEditor" novalidate class="form-horizontal col-md-12"> 
<div class="row"> 
    <div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : frameVersionEditor.distributor.$invalid && frameVersionEditor.distributor.$touched}"> 
     <label>Distributor</label> 
     <select name="distributor" data-ng-model="myDistr" data-ng-options="distributors.key as distributors.value for distributors in distributorOptions" class="form-control" required> 
      <option value="">Select Distributor</option> 
     </select> 
     <span ng-show="frameVersionEditor.distributor.$error.required && frameVersionEditor.distributor.$touched" class="help-block">Please select a distributor</span> 
    </div> 
</div> 
</form> 
<button data-ng-click="generate()" ng-disabled="frameVersionEditor.$invalid">Generate</button> 

Đây là bộ điều khiển của tôi:

var myApp = angular.module('myApp',[]); 

myApp.controller('myController', ['$scope', function($scope) { 
     $scope.myDistr = []; 
     $scope.distributors = 
      [ 
       { 
        'key': '0', 
        'value': 'A' 
       }, 
       { 
        'key': '1', 
        'value': 'B' 
       }, 
       { 
        'key': '2', 
        'value': 'C' 
       } 
      ]; 
     $scope.generate = function() { 
     //Do something 
     }; 
}]); 

Answer 1

Tôi đã có nhiều vấn đề tương tự chỉ một thời gian ngắn trước đây. Tôi đã giải quyết nó bằng cách thêm một vài thứ vào trường chọn và một mục khác vào mảng các lựa chọn có thể có.

Trước tiên, bạn muốn thêm lựa chọn trống hoặc không hợp lệ vào danh sách các lựa chọn có thể có, vị trí tốt nhất nằm ở vị trí [0] và bạn sẽ thấy lý do tại sao tiếp tục xuống.

vm.distributors = [ "Select Distributor", "A", "B", "C" ]; 

Tiếp theo, bạn cần thêm và cập nhật một số Chỉ thị góc cho trường bạn chọn. Bạn muốn ng-hợp lệ để cho biết Góc có thể chấp nhận ở đây. Bạn cũng cần xác định rằng bạn đang bắt đầu trường bằng giá trị "chọn thứ gì đó khác" và giá trị đó không hợp lệ cho giá trị đó được chọn trong khi gửi. Thêm tên và id thường là các mục thực hành tốt nhất. Bit cuối cùng để thêm vào là chỉ thị ng-required, vì bạn đã sử dụng novalidate trên biểu mẫu, nhưng nó yêu cầu mục biểu mẫu này thay đổi thành một cái gì đó hợp lệ. Kết quả cuối cùng là dưới đây:

<div class="form-group col-lg-2 col-lg-push-1" ng-class="{'has-error' : vm.myDistr == vm.distributors[0] && frameVersionEditor.$dirty 
    || frameVersionEditor.distributor.$pristine && frameVersionEditor.distributor.$touched}"> 
     <label>Distributor</label> 
     <select data-ng-model="vm.myDistr" id="myDistr" name="myDistr" ng-init="vm.distributors[0]" class="select form-control skinny" ng-required="true" 
     data-ng-options="d for d in vm.distributors" ng-valid="vm.myDistr != vm.distributors[0]"></select> 
     <p class="required" ng-show="vm.myDistr == vm.distributors[0]">&#42;</p> 
     <p class="good" ng-show="vm.myDistr != vm.distributors[0]">&#10004;</p> 
     <span ng-show="vm.myDistr == vm.distributors[0] && frameVersionEditor.$dirty || frameVersionEditor.distributor.$pristine 
     && frameVersionEditor.distributor.$touched" class="help-block">Please select a distributor</span> 

Điều này cũng được cập nhật để minh họa việc thực hiện đơn giản nhất (vì bạn đang sử dụng 0-4 làm khóa, bạn không thực sự cần chúng, chỉ cần sử dụng mảng cơ bản). Tôi cũng đã thay đổi mã của bạn trùng với John Papa's các phương pháp hay nhất và được thêm vào dấu sao màu đỏ (cho lựa chọn không hợp lệ) và dấu kiểm màu xanh (để chọn đúng), cũng như một thực hành tốt khác (hiển thị thành công cũng như thất bại) trong trường hợp của người dùng không nói tiếng Anh.

Bạn cũng không cần tùy chọn bắt đầu mà bạn đã chỉ định ban đầu vì cập nhật của tôi xử lý độc đáo.

Theo yêu cầu, đây là Plunker.

Tôi hy vọng điều này sẽ hữu ích.

-C§

Answer 2

Tôi đã thực hiện lên fiddle này và tất cả mọi thứ dường như làm việc tốt.

<div ng-app="myApp" ng-controller="myController"> 
    <h1>Select a Distributor</h1> 
    <form name="form" class="form-horizontal col-md-12" novalidate> 
     <div class="row"> 
      <div class="form-group col-lg-2 col-lg-push-1" ng-class="{ 'has-error': form.distributor.$invalid && form.distributor.$touched }"> 
       <label>Distributor</label> 
       <select name="distributor" ng-model="mySelection" ng-options="d.key as d.value for d in myDistr" class="form-control" required> 
        <option value="">Select Distributor</option> 
       </select> 
       <span ng-show="form.distributor.$error.required" class="help-inline">Please select a distributor</span> 
      </div> 
     </div> 
    </form> 
    <hr/><hr/> 
    <button class="btn btn-primary" data-ng-click="generate()" ng-disabled="form.$invalid || form.distributor.$touched">Generate</button> 
</div> 

Tôi có nghi ngờ rằng có lẽ các $touched kiện is not what you think.

Xin vui lòng cho tôi một số thông tin phản hồi nếu tôi sai!