设置$无效和$错误不会使表格无效

我有一个表单，我正在将我的手机字段从使用正则表达式转换为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

设置$无效和$错误不会使表格无效

回答

相关问题