Đặt $ không hợp lệ và $ lỗi không làm mất hiệu lực biểu mẫu

Question

Tôi có một biểu mẫu mà tôi đang trong quá trình thay đổi trường điện thoại của mình bằng cách sử dụng regex cho mô-đun đầu vào intl-tel-input. Tôi đang gặp sự cố & sự nhầm lẫn khi kiểm tra các số hợp lệ.

Tôi có một hình thức với một số các lĩnh vực ...

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

và nộp ...

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

Sau đó, trong bộ điều khiển của tôi (nguyên cảo) ...

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

Điều này đặt đúng lớp có lỗi và thông báo lỗi của tôi, nhưng nó không đặt MẪU thành không hợp lệ. Tôi đã thử $ setValidity ...

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

... nhưng dường như không làm gì cả.

Làm cách nào để đặt trường thành không hợp lệ, hiển thị đúng thông báo ng (nếu có nhiều hơn) và đảm bảo biểu mẫu $ lỗi được cập nhật để gửi được tắt?

Answer 1

Hóa ra $ setValidity đang làm việc, nhưng có setValidity cùng với $ không hợp lệ và $ lỗi gây ra một số vượt qua dây.. Nhận xét về hai lần bật/tắt lần cuối nút gửi của tôi một cách chính xác khi vô hiệu hóa một trường.

Answer 2

Bạn chỉ có thể thiết lập các hình thức không hợp lệ như sau:

forms.contactForm.$invalid = true