0
일부 필드가 유효성 검사 범위 개체에 추가되지 않았습니다. 이름이 'x'로 설정되어 있습니다. 신용 카드 # 필드와 만기 날짜 필드를보십시오.AngularJS 양식 유효성 확인 버그 (예제 포함)
또한 양식의 address_ * 필드 만 완료되면 양식에 $ valid === true가 잘못 표시됩니다.
도와주세요. 여기
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'}
}
}])
그리고
view examplehttp://codepen.io/anon/pen/ByQRMP?editors=101
당신은 그 분야에ngModel 누락 일부 옥
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 }}