使用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-model显示验证错误?因为,以下内容不起作用:

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

我正在使用Angular v1.4.8。

卡梅里斯

我创建了一个导出模型控制器的指令。我认为这不是最好的方法,但是它可以工作。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用模型清理方法进行字段验证

使用extval对表进行模型验证

使用单独的数据集进行模型验证

Django 1.8.3-使用相关对象进行模型字段验证

使用插入符号包进行交叉验证的最终模型

使用特性在 C# 中进行模型验证

使用 DataAnnotations 进行模型验证 [DataType(DataType.Currency]

使用<tr ng-repeat>进行AngularJS <input>验证

使用ng-messages对生成的字段进行表单验证

使用视图模型进行远程验证。列出视图模型中的属性

使用插入符号训练多个模型时,使用相同的trainControl对象进行交叉验证是否可以进行精确的模型比较?

角形式验证:即使使用自定义输入指令的ng-required = false,也将设置$ error.required

使用自定义验证程序ng-valid类进行Angular 2表单验证

在域服务的域模型中进行验证?

Rails在更新时进行模型验证

在模型层上进行数据验证?

模型仅针对创建进行验证

更改Keras模型进行验证步骤

使用REST API和javascript前端(例如Angular)进行模型验证的最佳做法

在具有自定义清理方法的CreateView / ModelForm中使用django进行模型验证

使用auto_now对日期时间字段进行模型验证

使用软删除的模型和唯一数据库字段进行Laravel验证

Django:使用python-magic在模型中进行文件字段验证

Laravel 5.7使用与模型属性不同的表单字段进行验证

使用 Keras 进行机器学习:同一模型的不同验证损失

使用JavaScript进行验证

使用IClientModelValidator进行验证

使用 Javascript 进行验证

使用AngularJS进行验证