web-dev-qa-db-ja.com

AngularJS-フォームのカスタム検証-少なくとも1つの入力が空かどうかを確認します

次のような単純なhtmlフォームがあるとします。

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
... submit input and all the other code...
</form>

入力の少なくとも1つが空の場合、検証時間を確認する方法を知るためにあなたの助けが必要です。必要な検証は次のとおりです。ユーザーは、少なくとも1つの設定を完了する必要があります。

JQueryを使用してこれ：

if ( $("input").val() == "" ) {

動作しますが、angularを使用して同じことを行う方法を理解したいと考えています。

よろしくお願いします。

ギジェルモ

javascripthtmlvalidationangularjs
13
Guillermo

したがって、すべての入力が空白の場合は、送信ボタンを無効にするという考え方です。あなたはこのようにすることができます

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference2" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference3" />

   <button type="submit" ng-disabled="!(!!shipment.userPreference1 || !!shipment.userPreference2  || !!shipment.userPreference3)">Submit</button>
</form>

!!strは、strをboolean値に強制的に変換することです。そして両方!!nullおよび!!""はfalseと評価されます。

Demo

29
zs2020

私の解決策は次のとおりです。

        $scope.requiredInputsGroup = function () {
            var isRequired = true;
            if (!$scope.shipment) {
                return true;
            }
            angular.forEach(["userPreference1", "userPreference2", "userPreference3"], function (input) {
                if ($scope.shipment[input]) {
                    isRequired = false;
                    return false;
                }
            });

            return isRequired;
        };

そのメソッドを各入力のdata-ng-requiredに適用します。

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" ng-required="requiredInputsGroup()" />
   <input name="userPreference2" type="text" ng-model="shipment.userPreference2" ng-required="requiredInputsGroup()" />
   <input name="userPreference3" type="text" ng-model="shipment.userPreference3" ng-required="requiredInputsGroup()" />

   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

そして、私が適用した最後のビットは、単純なmyForm.$invalidでボタンを無効にすることでした。

4
marksyzm

フォームの$ validでどのように処理するかを、入力要素とスタイル/コードで「必須」に設定できます。チェックアウト http://dailyjs.com/2013/06/06/angularjs-7/

4
Mouli