8

ng-model 属性がモデルに直接バインドされ、ユーザーが変更について即座にフィードバックを得る方法が本当に気に入っています。私のユースケースでは完璧です。ただし、計算にレンチを投入できるモデルに無効​​な値を入れたくありません。フォームコントロールの値が有効な場合にのみ、モデルを更新したいと思っています。無効な値の場合、モデル値が固定されたままコントロール値が変更されても問題ありません。

angular (1.2rc) NgModelController の $setViewValue 実装のソースを変更すると:

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

これに：

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

それはまさに私が望むことをしているようですが、これを適切な方法で行う方法がわかりません。この動作を変更する正しい方法は何ですか? それとも、私の試みは何らかの理由で失敗する運命にありますか?

更新: 例を追加しました。

たとえば、 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>

そしてJS：

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

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

数値は 10 から 20 の間の値に対して適切に表示されますが、ボックスに突然「8」を入力するか、2 番目の数字を削除して「1」を残した場合でも、最後の有効な数値が上に表示されるようにしたいと考えています。つまり、コントロールが有効でない場合でも、モデルには常に有効な値があります。

4

3 に答える 3

9

渡された値が無効な場合、AnugularJS バリデーターのデフォルトの動作はモデルを更新しないと思います。開発者ガイドを見てCustom Validationこれらのサンプルを確認すると、モデルが更新されていないか、UI で提供された無効な値でクリアされていることも示されています

于 2013-09-07T18:55:02.193 に答える
2

Chandermani が言ったように、これはデフォルトの動作です。これは、実際の動作を示す例です。

<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 }} は、入力に少なくとも 4 文字を書き込むまで何も表示しません。

よろしくお願いします。

編集

デフォルト値が必要な場合は、計算された値を使用して、値を2つの値に分解できると思います:

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

ここに例を設定します：http://jsfiddle.net/7vtew/1/

于 2013-09-07T20:14:01.317 に答える
2

これはデフォルトの動作ですが、ngModelOptions ディレクティブを使用してこれを変更できます

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

ドキュメント: https://docs.angularjs.org/api/ng/directive/ngModelOptions「モデルの更新と検証」セクションを参照してください

于 2017-09-27T09:02:15.403 に答える