Không ghi lại các giá trị không hợp lệ với ng-model

Question

Tôi thực sự thích cách thuộc tính ng-model liên kết trực tiếp với mô hình của tôi và người dùng nhận được phản hồi tức thì về các thay đổi của họ. Đối với trường hợp sử dụng của tôi đó là hoàn hảo. Tuy nhiên, tôi không muốn các giá trị không hợp lệ được đưa vào mô hình nơi chúng có thể ném cờ lê vào các tính toán. Tôi bằng cách nào đó muốn mô hình chỉ được cập nhật nếu giá trị trong điều khiển biểu mẫu hợp lệ. Đối với các giá trị không hợp lệ, sẽ tốt cho giá trị điều khiển thay đổi trong khi giá trị mô hình vẫn cố định.

Nếu tôi thay đổi nguồn gốc của góc (1.2rc) thực hiện NgModelController của $ setViewValue:

this.$setViewValue = function(value) { 
... 
    if (this.$modelValue !== value) { 
    this.$modelValue = value; 
    ... 
    } 
}; 

Để này:

this.$setViewValue = function(value) { 
... 
    if (this.$modelValue !== value && this.$valid) { 
    this.$modelValue = value; 
    ... 
    } 
}; 

Có vẻ như để làm chính xác những gì tôi muốn, tuy nhiên tôi don' t biết làm thế nào để làm điều này một cách thích hợp. Cách đúng để thay đổi hành vi này là gì? Hay những nỗ lực của tôi có bị thất bại vì một lý do nào đó không?

Cập nhật: Đã thêm ví dụ.

Ví dụ nhìn vào http://jsfiddle.net/FJvgK/1/ HTML:

<div ng-controller="MyCtrl"> 
    {{validNumber}} 
    <form> 
     <input 
      type="number" 
      ng-model="validNumber" 
      required 
      min="10" 
      max="20" 
     /> 
    </form> 
</div> 

Và JS:

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

function MyCtrl($scope) { 
    $scope.validNumber = 15; 
} 

Số cho thấy đúng cho giá trị từ 10 đến 20, nhưng tôi muốn nó để nếu bạn đột nhiên nhập '8' vào hộp hoặc xóa chữ số thứ hai để lại '1' số hợp lệ cuối cùng vẫn hiển thị ở trên. Tức là, mô hình luôn có giá trị hợp lệ, ngay cả khi điều khiển không có.

Answer 1

Tôi tin rằng hành vi mặc định của trình xác thực AnugularJS không cập nhật mô hình nếu giá trị được chuyển không hợp lệ. Nếu bạn nhìn vào số developer guide và xem qua Custom Validation các mẫu này cũng cho thấy rằng mô hình không cập nhật hoặc bị xóa trên giá trị không hợp lệ được cung cấp trong giao diện người dùng

Answer 2

Như Chandermani cho biết, đây là hành vi mặc định. nó hoạt động:

<form name="myform"> 
    <input type="text" name="myinput" ng-model="myvalue" ng-minlength="4" required> 
</form> 

Is the input valid ? {{ myform.myinput.$valid }} <br /> 
Input's value : {{ myvalue }} 

{{myvalue}} không hiển thị gì cho đến khi bạn viết ít nhất 4 ký tự trong đầu vào.

Trân trọng.

EDIT

Nếu bạn cần một giá trị mặc định, tôi đoán bạn có thể phá vỡ giá trị của mình vào 2 giá trị, sử dụng một giá trị tính toán:

var validNumber = 15; 
    $scope.validNumber = function() { 
     if ($scope.myform.myNumber.$valid) return $scope.myNumber; 
     else return validNumber; 
    }; 

tôi thiết lập một ví dụ ở đây: http://jsfiddle.net/7vtew/1/

Answer 3

Đây là hành vi mặc định, nhưng bạn có thể sửa đổi điều này bằng cách sử dụng lệnh ngModelOptions

<input 
    type="number" 
    ng-model="validNumber" 
    required 
    min="10" 
    max="20" 
    ng-model-options="{ allowInvalid: true }" 
    /> 

Tài liệu: https://docs.angularjs.org/api/ng/directive/ngModelOptions Xem phần 'Cập nhật mô hình và xác thực'