2016-08-16 14 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}; 
} 

has-errorクラスとエラーメッセージを適切に設定しますが、FORMを無効に設定しません。私は$ setValidityを試しました...

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

...何もしていないようです。

フィールドを無効に設定し、正しいng-message(複数の場合)を表示し、フォーム$ errorsが更新されて送信が無効になっていることを確認しますか?

答えて

3

は$ setValidityが作業していて、一緒にsetValidityを持っていたが判明$無効と$エラーがいくつかの交差線を引き起こしました。フィールドを無効にすると、最後の2つをコメントアウトして、送信ボタンを有効/無効にしました。

0

あなたはそうのように無効にフォームを設定することができるはずです。

forms.contactForm.$invalid = true 
+0

これはフォームを無効にしますが、フィールドが固定されているときにフォームを無効にするのに役立ちません。validatePhoneでelseを実行してフォームを有効に設定することはできません。 – NikZ

関連する問題