Angular JSフィールドの値が有効なのはその値が0より大きい

Question

フォームに次のテキストボックスがあり、ユーザーがカテゴリを変更したときにその値が動的に変化します（選択ボックス）。最初は、それが0

$scope.validCats = "0"; 

HTMLに設定した。

<input ng-model="validCats" value="" type="text" class="form-control input-text phone_number" required > 

ユーザーが直接その値を変更することはできません。値がゼロ以下の場合は、検証エラーを表示する必要があります（つまり、フィールドが無効です）。値が0より大きい場合にのみ有効です。

私を助けてください。

Answer 1

変更numberにtypeと次の行を追加します。

<input ng-model="validCats" type="number" min="1" 
    class="form-control input-text phone_number" required > 
<span ng-show="validCats === 0 || validCats === '0'">Invalid categories</span> 

そして

$scope.validCats = 0 // instead of "0" 

、いつtype="number"

クローム& Firefoxがそのテキストフィールドのためのスピナーをしないように、あなたはまた、CSSを設定する必要があります

.input-text { 
    -moz-appearance: textfield; 
} 
.input-text::-webkit-outer-spin-button { 
    -webkit-appearance: none 
    margin: 0 
} 
.input-text::-webkit-inner-spin-button { 
    -webkit-appearance: none 
    margin: 0 
} 

あなたはとても送信を防止するための入力欄にmin="1"バリデータを（HTML5のみ）を追加する必要があります。また、このような方法でチェックを追加することができます。

// called from ng-submit 
$scope.onFormSubmit = function() { 
    // just additional check 
    if ($scope.validCats === 0 || $scope.validCats === "0") { 
     return false; 
    } 

    // do other thing after form submission 
}