1

私は角度のあるアプリに取り組んでおり、選択要素にパターン検証を配置する必要がありました。select で ng-pattern を使用するだけでは機能しませんでした。そのため、非表示の入力に ng-pattern を使用して同じモデルで非表示の入力を作成しましたが、それも機能しませんでした。そこで、ng-pattern でテキスト入力を作成し、css で隠しました。これは美しく機能します。

これに対する小さな回避策はありますか？

EDIT1：オプションが生成されることを追加する必要があったと思いますng-options

EDIT2：コードスニペットを編集して、実際に必要なものを表示しました。

function formCtrl($scope) {
  $scope.options = ['Please Select','Value 1','Value 2'];
  $scope.price = 'Please Select';
    $scope.onSubmit = function (form) {
        console.log(form.$valid);
    }
}
.show-none {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
    <form name="myForm" ng-submit="onSubmit(myForm)">
        <select ng-model="price" ng-options="o as o for o in options"></select>
        <input type="text" class="show-none" ng-pattern="/^(?!.*(Please Select))/" ng-model="price" name="price_field"> <span ng-show="myForm.price_field.$error.pattern">Not a valid option!</span>

        <input type="submit" value="submit" />
    </form>
</div>

4

3 に答える 3

1

そもそも特定のオプションを選択できないようにする場合は、特定のオプションを無効にすることもできます。

  <select ng-model="price">
    <option disabled>Please Select</option>
    <option>TEST1</option>
    <option>TEST2</option>
  </select>
于 2015-08-20T20:31:17.150 に答える
1

この場合、ng-pattern隠しフィールドを使用しないでください。各オプションに値を追加する必要があります。次に、属性を使用して、送信する前にオプションのいずれかを選択する必要があります。追加すると、フォーム要素がオブジェクトに追加されます。inputrequiredname="price"myForm

マークアップ

<select ng-model="price" name="price" required>
     <option>Please Select</option>
     <option value="TEST1">TEST1</option>
     <option value="TEST2">TEST2</option>
</select>

アップデート

を使って作りたい場合はng-options、以下のようなものになります。配列に追加する必要はありませんPlease Select。内部に手動で追加できますselect

マークアップ

<form name="myForm" ng-submit="onSubmit(myForm)" novalidate>
  <select ng-model="price" ng-options="o for o in options" required>
    <option value="">Please select a person</option>
  </select>

  <input type="submit" value="submit" />
</form>

コード

(function(angular) {
  'use strict';
  angular.module('staticSelect', [])
    .controller('formCtrl', ['$scope', function formCtrl($scope) {
      $scope.options = ['Value 1', 'Value 2'];

      $scope.onSubmit = function(form) {
        console.log(form.$valid);
      }
    }]);
})(window.angular);

デモはこちら

于 2015-08-20T20:27:13.157 に答える
0

これは何度も何度も出てくるものであり、ここで提案されている解決策は私にはうまくいきません。これも非常に一般的な使用例です。

空のオプションを入れてみましたが、うまくいきませんでした。<option>AngularJS がタグの内容と同じ値の値属性を配置していることに気付きました。このオプションが選択されていても、選択は ng-valid でした。

私のシナリオでは、場所のリスト(オプションをバインドするスコープ変数)の最初の項目としてSELECT A CENTERというプレースホルダー オプションを配置しました。条件付き CSS で最初の項目を非表示にしますが、コントローラーでdc.user.CentreNameをSELECT A CENTERに設定して最初に選択します。これにより、ユーザーが他のオプションをクリックすると消える動作が得られます。別のオプションは、それを無効にすることです。つまり、リストの一番上に表示されますが、別の項目を選択すると選択できなくなります (Angular 1.4x で追加されました)。これを説明するために、そのコードも ( ng-disabled属性) に入れました。隠しルートに行きたい場合は、安全に削除できます。

次に、標準の Angular フォーム検証を使用して、最初のアイテム以外のアイテムが選択されていることを確認します。空のオプション（値なし）を入れて、選択時に必要な設定を行うという他の提案されたアプローチを試しました。そこで、負の先読みアサーションを使用して、必要な ng-pattern 属性を持つ非表示の入力フォーム要素を探しました。

ng-class を使用して ng-valid と ng-invalid を select にバインドし、既存の CSS スタイルが機能することに注意してください。

少しハッキーに感じますが、うまくいきます。

<select ng-model="dc.user.CentreName"
        ng-class="{'ng-valid': orderForm.centreName.$valid, 'ng-invalid': !orderForm.centreName.$valid }">
    <option ng-repeat="location in locations"
            ng-disabled="$index < 1"
            ng-style="$index < 1 && {'display': 'none'} "
            value="{{location}}">
        {{location}}
    </option>
</select>

<input
    type="hidden"
    ng-model="dc.user.CentreName"
    ng-pattern="/^(?!SELECT)/"
    required/>

そしてコントローラーで...（ ng-init を使用して、ビューからプレースホルダー値を宣言的に設定することもできます。 https://stackoverflow.com/a/13775151/4707368を参照してください）

function ShoppingController($scope [...]) {

   [...]

    $scope.dc = {
        user: {
            "CentreName": 'SELECT A CENTRE',
   [...]

CSS は次のようになります。

input.ng-touched.ng-invalid, select.ng-invalid
{
    background-color: rgba(199, 35, 35, 0.15);
}

input.ng-touched.ng-valid, select.ng-valid
{
   background-color: rgba(116, 173, 39, 0.16);
}
于 2016-04-14T09:16:09.530 に答える