web-dev-qa-db-ja.com

プロンプトオプションを使用した<select>でのAngularJS検証

Bootstrapでスタイル設定された選択ドロップダウン入力用の次のコードがあります。

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

ユーザーがこのフォームを送信する前に、ビジネスプロセスを選択する必要があります。

だから、requiredディレクティブをselectステートメントに配置しましたが、最初のオプションタグにはまだ選択されたオプションとしてカウントされる-- Select Business Process --があり、したがって必要なフラグが満たされているため、実際のビジネスがなくてもフォームが検証されますプロセスが選択されています。

この問題を解決するにはどうすればよいですか？

ありがとうございました。

validationangularjsselect
16
J86

このアプローチはあなたの問題を解決できる/すべきです：

1）スコープ内でオプションを宣言します。

$scope.processes = [
    { code: "C", name: "Process C" },
    { code: "Q", name: "Process Q" }
];

そして2）この宣言を使用します：

<select class="form-control" name="businessprocess" ng-model="businessprocess" required
    ng-options="c.code as c.name for c in processes" >
    <option value="">-- Select Business Process --</option>
</select>

実際のトリックは、angularサイクル中に、現在の値がprocessesオプションの中にないという問題を最初に修正することです。したがって、デフォルトはに設定：

<option value="">-- Select Business Process --</option>

およびrequiredは期待どおりに動作します（ 詳細 ）

30
Radim Köhler

コントローラのセレクタの値を初期化できます：

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

コントローラー内：

$scope.businessprocess = "A" ;

または「C」、「Q」、何でもいいので、選択には常に価値があります。ここでselectの「必須」は必要ないと思います。

Initに値が必要ない場合。また、ユーザーが選択しなかった場合にいくつかの追加効果を実行します。

<select class="form-control" name="businessprocess" ng-model="businessprocess" myRequired>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

次に、ディレクティブを記述します。

model.directive("myRequired", function() {
    return {
        restrict: 'AE',
        scope: {},
        require: 'ngModel',
        link: function(scope, iElement, iAttrs) {
                if(iElement.val() == ""){
                    //do something
                    return;
                } else {
                    //do other things
                }
            });
        }
    };
});
4
Frankjs

[〜＃〜] js [〜＃〜]



    angular.module('interfaceApp')
  .directive('requiredSelect', function () {
    return {
      restrict: 'AE',
      require: 'ngModel',
      link: function(scope, Elm, attr, ctrl) {

        if (!ctrl) return;
          attr.requiredSelect = true; // force truthy in case we are on non input element

          var validator = function(value) {
            if (attr.requiredSelect && ctrl.$isEmpty(value)) {
              ctrl.$setValidity('requiredSelect', false);
              return;
            } else {
              ctrl.$setValidity('requiredSelect', true);
              return value;
            }
          };

          ctrl.$formatters.Push(validator);
          ctrl.$parsers.unshift(validator);

          attr.$observe('requiredSelect', function() {
            validator(ctrl.$viewValue);
          });
      }
    };
  });
2
paulohenriquevn

最善の方法であり、まっすぐな方法を使用することです：

[〜＃〜] html [〜＃〜]

<select name="businessprocess" ng-model="businessprocess"  required>
        <option selected disabled value="">-- Select Business Process --</option>
        <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
2
youhammi

次のようなフォームを追加することができます。

[〜＃〜] html [〜＃〜]

<div ng-app="myApp" ng-controller="MyCtrl">
     <form name="mainForm">
    <select name="businessprocess" ng-model="businessprocess"  required>    
        <option value="">-- Select Business Process --</option>
        <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
    </select>
    <span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>

js

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

function MyCtrl($scope, $timeout) {
   $scope.processes = [{
        id: "C",
        value: "Process C"
    }, {
        id: "Q",
        value: "Process Q"
    }];
}

デモ Fiddle

1
Maxim Shoustin

最初のオプションに「無効」を追加します。

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
0
Ömer An

次のコードスニペットを使用します

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A" disabled selected hidden>-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>
0
tharindu

これは私のために動作します。ユーザーが「選択...」以外の値を選択するまで、フォームは無効です

<select name="country" id="country" class="form-control" formControlName="country" required>
    <option selected value="">Choose...</option>
    <option *ngFor="let country of countries">{{country.country}}</option>
</select>
0
JanBrus