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

我的某些字段未添加到表单验证范围对象。 它们具有name='x'集合；请参见“信用卡”字段和“到期日期”字段

此外，当只有表单的地址字段完整时，表单的$valid===true错误

请帮忙

这是一些玉

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 }}

---

这些字段中缺少

ngModel

具有

ngModel

指令的输入控件保存

NgModelController

。这样的控件实例可以作为 使用输入上的name属性的窗体实例的属性 控制。

name

属性指定 表单实例

参考：

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 }}