Question

我试图使用AngularJS信用卡验证码https://github.com/bendrucker/angular-credit-cards

我添加了示例代码

<input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type />
<p ng-show="ccForm.cardNumber.$invalid && ccForm.cardNumber.$ccEagerType">
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number!
</p>
<div ng-show="(ccForm.cardNumber.$invalid  && ccForm.cardNumber.$viewValue != null)">Card number is invalid</div>

到此处的演示代码http://embed.plnkr.co/uE47aZ/preview

我能够在cc字段中输入字母而不会抛出错误信息。

问题是如何在需要该字段时显示无效的CC编号消息，但在删除CC编号时阻止ccForm.cardNumber.$invalid的状态仍为true

更新我已经移动了代码，对两种情况都进行了一次按摩

<div ng-show="(ccForm.cardNumber.$invalid  && ccForm.cardNumber.$ccEagerType) || (ccForm.cardNumber.$invalid &&  ccForm.cardNumber.$viewValue != '')">Card number is invalid</div>

当触摸该字段但在那里没有输入任何内容时，它可以起作用。在这种情况下，我会显示消息 - 必需和无效。

Answer 1

这是与ngRequired，cc-number或cc-cvc结合使用并与https://github.com/bendrucker/angular-credit-cards代码问题相关的cc-exp指令案例的临时解决方法当字段为$touched但该字段中没有输入任何内容时。在这种情况下，接受标准是仅显示必需消息但不显示无效消息（尚未提供任何值）。

要解决它而不编辑我的代码，就是为上面提到的字段设置初始值。示例如下：

ng-init="card.number=''"

然后使用下面的组合来显示正确的消息

<span ng-show="(form.input.$error.required || form.input.$error.parse) &&  form.input.$viewValue == ''">Required entry</span>
<span ng-show="form.input.$invalid &&  form.input.$viewValue != ''">Entry is invalid</span>

我认为在文档中的某处提到它会很好，直到它将永久修复到代码中。

AngularJS ngRequired指令和$ invalid状态

1 个答案: