Угловая проверка формы с использованием модели Ng

Вопрос: как я могу показать ошибку проверки, используя только 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-модель? Потому что следующее не работает:

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

Я использую Angular v1.4.8.


angularjs angularjs-ng-form angularjs-validation
person Neel    schedule 27.10.2016    source источник
comment
‹p ng-show=form.$submitted && !vm.number›Blabla‹/p›   -  person yBrodsky    schedule 27.10.2016
comment
О да, хорошая идея. Могу ли я использовать аналогичный способ для maxlength и minlength валидации?   -  person Neel    schedule 27.10.2016
comment
Хорошо обязательно. Вы можете проверить, если vm.number.length › x. Однако это неправильно. Почему вы не можете использовать имена и проверить, как это должно быть?   -  person yBrodsky    schedule 27.10.2016
comment
vm.number.length должно работать. Просто, но меня это не зацепило. Причина, по которой я не могу использовать имена, заключается в том, что добавление имени приведет к тому, что пользовательские данные в этих полях будут переданы на мой сервер при отправке формы. Я не хочу этого, поскольку отсутствие именования означает, что мне больше не нужно беспокоиться о редактировании журналов, шифровании сведений о держателе карты или других бременах соответствия PCI.   -  person Neel    schedule 27.10.2016
comment
Если вы можете добавить это в качестве ответа, я могу принять его и закрыть. Спасибо за ответ.   -  person Neel    schedule 27.10.2016
comment
Куда подали? Если у вас нет атрибута действия в форме.   -  person yBrodsky    schedule 27.10.2016
comment
Он будет отправлен непосредственно на стрип-сервер для дальнейшей обработки.   -  person Neel    schedule 27.10.2016
comment
Форма будет отправлена ​​на полосу, как эта Stripe.card.createToken($form, stripeResponseHandler);, которая создает токен для этой карты, а затем на моем сервере сохраняется только токен карты.   -  person Neel    schedule 27.10.2016
comment
ng-submit ничего никуда не отправляет. Он просто вызывает функцию, которую вы в него вложили. Данные формы находятся в атрибутах ng-модели, которые у вас есть в каждом вводе. Не вижу проблемы в именах. Так или иначе....   -  person yBrodsky    schedule 27.10.2016
comment
хм... в твоих словах есть смысл. Когда я читал документацию по полосам для пользовательских форм, в ней говорилось, что атрибут имени заставит данные карты касаться моего сервера. Но, если подумать, то, вероятно, так обстоит дело и со сценарием действия. Прямо сейчас в angular ng-submit просто отправляет объекты формы на полосовой сервер, чтобы сначала получить токен, а затем обработать токен на моем сервере. Так что имя или нет, данные копий в любом случае не должны касаться моего сервера. Я думаю, вы правы. Спасибо, что указали на это. Документ с полосой, который я прочитал, взят отсюда: stripe.com/docs/custom-form   -  person Neel    schedule 27.10.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я создал директиву для экспорта контроллера модели. Я не думаю, что это лучший способ, но он работает.

.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/

person jcamelis    schedule 27.10.2016