AngularJS 表单验证错误（带示例）

Question

我的一些字段没有被添加到表单验证范围对象中。他们设置了 name='x'；查看信用卡编号字段和到期日期字段。

当只有表单的 address_* 字段完整时，表单错误地包含 $valid===true。

请帮忙？

view example http://codepen.io/anon/pen/ByQRMP?editors=101

var app = angular.module('app', []);
app.controller('MainController', ['$scope', function($scope) {
  $scope.user = {
    address_line1: '1234 Elm',
    address_line2: '',
    address_city: 'Narnia',
    address_state: 'NA',
    address_zip: 80123,
    stripe: {last4: '1234'}
  }
}])

这是一些翡翠

div(ng-app='app')

  div(ng-controller='MainController')
    .col-xs-12.card-edit-box.animated(ng-form, name="ccForm")
      fieldset
        h3(ng-if='!user.stripe.last4') Enter Your Billing Info
        h3(ng-if='user.stripe.last4')  Edit Your Billing Info
        .clearfix
        .form-group

          .row
            .col-sm-12.control-group
              label.control-label Address
          .row
            .col-xs-8.control-group.animated(ng-class="{ 'has-error': !ccForm.address_line1.$valid, 'has-success': ccForm.address_line1.$valid }")
              input#address_line1.form-control(type='text', ng-model='user.address_line1', minlength='4', required, placeholder='Address', name='address_line1', maxlength='48')
            .col-xs-4.control-group.animated(ng-class="{ 'has-error': !ccForm.address_line2.$valid, 'has-success': ccForm.address_line2.$valid }")
              input#address_line2.form-control(type='text', ng-model='user.address_line2', minlength='0', placeholder='Apt/Unit #', name='address_line2', maxlength='12')
          .row
            .col-xs-5.control-group.animated(ng-class="{ 'has-error': !ccForm.address_city.$valid, 'has-success': ccForm.address_city.$valid }")
              input#address_city.form-control(type='text', ng-model='user.address_city' placeholder='City', name='address_city', required, minlength='2')
            .col-xs-3.control-group.animated(ng-class="{ 'has-error': !ccForm.address_state.$valid, 'has-success': ccForm.address_state.$valid }")
              input#address_state.form-control(type='text', ng-model='user.address_state', maxlength='2', minlength='2', required, placeholder='State', name='address_state')
            .col-sm-4.control-group.animated(ng-class="{ 'has-error': !ccForm.address_zip.$valid, 'has-success': ccForm.address_zip.$valid }")
              input#address_zip.form-control(type='text', ng-model='user.address_zip', maxlength='5', minlength='5', required, placeholder='Zip code', name='address_zip', ng-change='getTaxRate(address_zip)')
          .row
            .col-sm-12.control-group.animated(ng-class="{ 'has-error': !ccForm.card_number.$valid, 'has-success': ccForm.card_number.$valid }")
              label.control-label Card Number
              if _debug
                input#card_num.form-control(type='text', name='card_number', value='5555555555554444', minlength='16', required, maxlength='20', ng-disabled='user.address_zip.toString().length !== 5')
              else
                input#card_num.form-control(type='text', value='', name='card_number', placeholder='xxxx-xxxx-xxxx-{{ user.stripe.last4 }}', minlength='16', maxlength='20', required, ng-disabled='user.address_zip.toString().length !== 5')
          .row
            .col-sm-12.control-group
              label.control-label Expiration & CVC
          .row
            .col-xs-4.control-group.animated(ng-class="{ 'has-error': !ccForm.month.$valid, 'has-success': ccForm.month.$valid }"): input#card_month.form-control(type='text', size='2', required, maxlength='2', minlength='2', placeholder='MM', name='month')
            .col-xs-4.control-group.animated(ng-class="{ 'has-error': !ccForm.year.$valid, 'has-success': ccForm.year.$valid }"): input#card_year.form-control(type='text', size='2', required, maxlength='2', minlength='2', placeholder='YY', name='year')
            .col-xs-4.control-group.animated(ng-class="{ 'has-error': !ccForm.cvc.$valid, 'has-success': ccForm.cvc.$valid }"): input#card_cvc.form-control(type='text', size='3', required, maxlength='3', minlength='3', placeholder='CVC', name='cvc')


          .row
            .col-xs-3.tax-rate-box(ng-if='taxError')
              b.text-danger {{ taxError }}
            .col-xs-3.tax-rate-box(ng-if='!taxError && (taxRate && taxRate > 0)')
              b: i Tax Rate: {{ (taxRate * 100) }}%

        .form-group
          .col-sm-offset-3.col-sm-4(ng-class="{ 'has-error': !ccForm.card_number.$valid, 'has-success': ccForm.card_number.$valid }")
            div(ng-if='ccForm.$valid')
              a.btn.btn-success.btn-save-card(type='button', ng-click='saveCard()') Update Payment CC#
            div(ng-if='!ccForm.$valid')
              a.btn.btn-danger(type='button', disabled='true') ^^ Please Complete Form ^^
          .clearfix
          .alert.alert-info(ng-show='status') {{ status }}
          .alert.alert-danger(ng-show='error') {{ error }}

Answer 1

您在这些字段中缺少 ngModel。

input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

参考：https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state

AngularJS 表单验证错误（带示例）

AngularJS Form Validation Bug (w/ Example)

javascript

forms

validation

jquery

angularjs