2016-08-16 1 views
10

У меня есть форма, в которой я изменяю свои телефонные поля, используя регулярное выражение для модуля intl-tel-input. Я столкнулся с проблемами & путаница при проверке действительных #.

У меня есть форма с несколькими из этих полей ...

<div class="row"> 
<div class="col-xs-2"> 
    <label for="cellPhone" 
      translate>CONTACT.CELL</label> 
</div> 
<div class="col-xs-6" 
    ng-class="{'has-error': !cellPhoneFocus && forms.contactForm.cellPhone.$invalid && forms.contactForm.cellPhone.$touched }"> 
    <input type="text" class="form-control intlPhoneInput" 
      id="cellPhone" name="cellPhone" 
      ng-model="contact.cellPhone.display" 
      ng-focus="cellPhoneFocus = true" 
      ng-blur="cellPhoneFocus = false; validatePhone($event)"> 
    <div ng-messages="forms.contactForm.cellPhone.$error" 
     ng-show="!cellPhoneFocus && forms.contactForm.cellPhone.$touched" 
     class="errorMessages"> 
     <p ng-message="pattern" translate> 
      CRUD.VALID_PHONE</p> 
    </div> 
</div> 

и представить ...

<button type="submit" class="btn btn-primary" ng-disabled="forms.contactForm.$invalid" id="saveContactLink" translate>CRUD.SAVE</button> 

Затем в мой контроллер (Машинопись) ...

//In Constructor 
$scope.validatePhone = this.validatePhone.bind(this); 

//Outside constructor 
private validatePhone(eventObject: any) { 
    let thePhoneField = $('#' + eventObject.target.id); 
    let phoneIsValid = thePhoneField.intlTelInput("isValidNumber"); 

    this.$scope.forms.contactForm[eventObject.target.id].$invalid = !phoneIsValid; 
    this.$scope.forms.contactForm[eventObject.target.id].$error = {"pattern": !phoneIsValid}; 
} 

Этот правильно устанавливает мой класс ошибок и сообщение об ошибке, но он не устанавливает FORM недействительным. Я пробовал $ setValidity ...

this.$scope.forms.contactForm[eventObject.target.id].$setValidity('pattern', !phoneIsValid); 

... но, похоже, он ничего не делает.

Как установить недопустимое поле, показать правильное ng-сообщение (если его несколько) и убедиться, что форма $ errors обновляется, поэтому подача отключена?

ответ

3

Оказывается $ setValidity работает, но с setValidity вместе с $ недействительна и $ ошибка вызвала некоторые пересекли провод.. Комментирование последних двух включенных/отключенных моей кнопки отправки правильно при аннулировании поля.

0

Вы просто должны быть в состоянии установить форму недействительных следующим образом:

forms.contactForm.$invalid = true 
+0

Хотя это приведет к аннулированию формы, оно не поможет сделать ее действительной, когда поле исправлено, поскольку я не могу просто сделать else на validatePhone, чтобы установить форму в действительный ... поскольку существует более одного поля. – NikZ

Смежные вопросы