0

ng-model質問:フォームとその要素に名前を付けることができない場合にのみ、検証エラーを表示するにはどうすればよいですか。

クレジット カードの詳細を収集するための html フォームがあります。クレジット カード データがサーバーにアクセスするのを防ぐため、フォーム要素に名前を付けることができません。したがって、私のフォームは次のようになります。

<form ng-submit="vm.processForm()">

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number" ng-model="vm.number" required>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YY)</span>
      <input type="text" size="2" data-stripe="exp_month" ng-model="vm.exp_month" required>
    </label>
    <span> / </span>
    <input type="text" size="2" data-stripe="exp_year" ng-model="vm.exp_year" required>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc" ng-model="vm.cvc" required>
    </label>
  </div>

  <input type="submit" class="submit" value="Submit Payment">
</form>

通常、Angular では、たとえば次のように、フォーム要素名を使用して検証をチェックしていました。

<p ng-show="userForm.creditcard.$error.required">Your credit card number is required.</p>

しかし、フォームとその要素に名前を付けることができないため、ng-model のみを使用して検証エラーを表示するにはどうすればよいですか? 以下は機能しないためです。

<p ng-show="vm.number.$error.required">Your credit card number is required.</p>

Angular v1.4.8 を使用しています。

4

1 に答える 1

2

モデルコントローラーをエクスポートするディレクティブを作成しました。それが最善の方法だとは思いませんが、うまくいきます。

.directive('exportModel', function () {
    return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        attr.$observe('exportModel', function (value) {
        scope[value] = ngModel;
      })
    }
  }
})

http://jsfiddle.net/Lvc0u55v/11352/

于 2016-10-27T20:03:01.247 に答える