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

Question

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

<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') );
    }

Answer 1

Вы можете обновить свой 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.