設置$無效和$錯誤不會使表格無效

我有一個表單，我正在將我的手機字段從使用正則表達式轉換爲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}; 
}

This This正確設置我的錯誤類和錯誤消息，但它不會將FORM設置爲無效。我試過$ setValidity ...

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

......但它似乎沒有做任何事情。

如何將字段設置爲無效，顯示正確的ng消息（如果存在多個消息），並確保表單$錯誤得到更新，以便提交被禁用？

來源

2016-08-16 NikZ

原來$ setValidity是工作，但與沿setValidity $無效和$錯誤造成了一定的交叉線。當使字段失效時，正確評論最後兩個啓用/禁用我的提交按鈕。

來源

2016-08-26 12:26:40 NikZ

你應該只能夠設置窗體像這樣爲無效：

forms.contactForm.$invalid = true

來源

2016-08-16 13:55:13 cullimorer

儘管這樣做會使表單無效，但是當字段修復時它不會有效，因爲我無法在validatePhone上將其設置爲有效......因爲有多個字段。 – NikZ

設置$無效和$錯誤不會使表格無效

回答

相關問題