i get an error in form validations. i can access to errors.minlength in console, but can't do i-CodePudding

i want that "name is too short" to be visible when last_name.errors.minlength is true. but i get an error: Property 'minlength' comes from an index signature, so it must be accessed with ['minlength'].

<div>
            <label for="lastname">Last Name</label>
            <input required #last_name="ngModel" minlength="4" maxlength="10" type="text" name="lastName" ngModel>
            <div [ngClass]="{visible: last_name.touched && last_name.invalid}" class="message">
                <div *ngIf="last_name.errors.minlength">name is too short</div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

CodePudding user response：

I usually do validations in a "reactive" way, to a form with the own Validators that ReactiveFormModule gives you, so I'm not used to validate just a simple field as "#local reference"...

But, try to change your *ngIf code like this:

*ngIf="last_name?.errors?.['minlength']"

CodePudding user response：

In your project's configuration, you have the noPropertyAccessFromIndexSignature rule enabled. It ensures, that if a certain field wasn't explicitly defined in an interface, then you cannot access it via dot syntax.

So, here what you need to do is to use indexed syntax instead:

*ngIf="last_name.errors['minlength']"

Or as another option, that looks cleaner, you can also use the hasError method. The code will look like that:

*ngIf="last_name.hasError('minlength')"

CodePudding user response：

Correct syntax:

“last_name.errors['minlength']"