Issue with angular 2 ngControl's minlength errors validator

Question

I have the following angular 2 form:

<form (ngSubmit)="updateFirstName()" #firstNameForm="ngForm" novalidate>
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
        <div class="input-group">
            <input type="text"
                   ngControl="firstName"
                   #firstName="ngForm"
                   required
                   minlength="2"
                   maxlength="35"
                   pattern_="FIRST_NAME_PATTERN"
                   [ngModel]="currentUserAccount?.firstName"
                   (ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null"
                   placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}"
                   class="form-control"/>
        </div>

        <div [hidden]="firstName.valid">
            <div *ngIf="firstName.errors.minlength" class="control-label">{{'FIRST_NAME_FORM.MIN_LENGTH'| translate}}</div>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right" [disabled]="buttonDisabled">{{'FIRST_NAME_FORM.SUBMIT'| translate}}</button>
        <a [routerLink]="['/dashboard/useraccount']" class="btn btn-link pull-right text-right">{{'FORM_CANCEL' | translate}}</a>
    </div>
</form>

However it seems errors is null as I get the following error when I load the form in the browser:

TypeError: Cannot read property 'minlength' of null

What I am getting wrong here?

Is the declarative use of minlength attribute in the template not sufficient?

Is there another way to declare the minlength validator than in a programmatic way i.e.

this.name = new Control('', Validators.minLength(4));

?

Maybe you need to use elvis operator like this *ngIf="firstName?.errors?.minlength" — yurzui
– yurzui, Commented May 15, 2016 at 13:25
Why not add it as an answer, then @balteo can accept it and the question is marked as answered? — Günter Zöchbauer
– Günter Zöchbauer, Commented May 15, 2016 at 16:15

Ben · Accepted Answer · 2018-04-22 13:20:32Z

I have faced the same problem, i.e. TypeError: Cannot read property 'minlength' of null. For me, the solution proposed by @yurzui solved the problem. I am adding it as an answer here (as suggested by @günter-zöchbauer), so that others (who may not read the comments) can easily find it.

Problem:

The minlength property may be accessed, before errors is defined:

<div *ngIf="firstName.errors.minlength">
    Too short
</div>

Solution:

Use the ? operator to ensure that errors is defined, before accessing its minglength property:

<div *ngIf="firstName.errors?.minlength">
    Too short
</div>

Alternative Solution:

Wrap your div in another div that checks if errors is defined:

<div *ngIf="firstName.errors">
    <div *ngIf="firstName.errors.minlength">
        Too short
    </div> 
</div>

Note that both solutions assume that firstName is defined.

PS: For anyone who needs it, the same applies to errors.maxlength as well!

surendra · Accepted Answer · 2020-03-03 14:52:37Z

0

// In this way it is working for me

<div *ngIf="firstName?.errors?.minlength">

</div>

answered Mar 3, 2020 at 14:52

surendra

451 silver badge9 bronze badges

1 Comment

Adrian Mole Over a year ago

This adds nothing that is not already given in the answer provided by Ben nearly two years ago.

Collectives™ on Stack Overflow

Issue with angular 2 ngControl's minlength errors validator

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related