Как показать ошибку только при выдаче максимальной длины? - PullRequest
Новая
       19

Как показать ошибку только при выдаче максимальной длины?

0 голосов
/ 29 мая 2018

Вот мой шаблон: 

<div *ngIf="isFieldValid('senderCity')" class="error">{{senderCityError}}</div>
                    <div *ngIf="isFieldMaxValid('senderCity')" class="error">Max 5 characters allowed.</div> 
                    <label *ngIf="canShowLabel('senderCity')" class="control-label">{{senderCityLabel}}</label>
                    <input type="text"  formControlName="senderCity"  class="form-control" placeholder="{{senderCityLabel}}" >

для проверки isFieldMaxValid - ошибка, которую я делаю так: 

isFieldMaxValid(field){
        return (this.quoteForm.get(field).valid && this.quoteForm.get(field).errors.maxLength )
    }

Но не ВОКС.как вернуть значение ошибки для maxlength?остальные работают правильно.

получаю сообщение об ошибке:

Cannot read property 'maxLength' of null

ОБНОВЛЕНИЕ Я попытался это: это работает.

isFieldMaxValid(field){
        return (!this.quoteForm.get(field).valid && this.quoteForm.get(field).hasError('maxlength') );
    }

но я получаю обе ошибки, как заставить один из них существовать одновременно? 

isFieldValid(field){
        return (!this.quoteForm.get(field).valid && !this.quoteForm.get(field).hasError('maxlength') && this.quoteForm.get(field).touched) || 
        (this.quoteForm.get(field).untouched && this.formSubmitAttempt);

    }

    isFieldMaxValid(field){
        return (!this.quoteForm.get(field).valid && this.quoteForm.get(field).hasError('maxlength') );
    }

1 Ответ

0 голосов
/ 29 мая 2018

Вы можете обновить html следующим образом: 

<div *ngIf="isFieldValid('senderCity') && !isFieldMaxValid('senderCity')" class="error">{{senderCityError}}</div>
                    <div *ngIf="isFieldMaxValid('senderCity')" class="error">Max 5 characters allowed.</div> 
                    <label *ngIf="canShowLabel('senderCity')" class="control-label">{{senderCityLabel}}</label>
                    <input type="text"  formControlName="senderCity"  class="form-control" placeholder="{{senderCityLabel}}" >

Показывать недопустимую ошибку только в том случае, если отсутствует ошибка maxLength.

...