Angular form validation highlight issue

Question

I have this form :

<form #createTeamForm="ngForm" (ngSubmit)="createTeam(createTeamForm)">
    <div class="form-group">
        <label for="newTeam">{{ "teams.createTeam" | translate }}</label>
        <input type="text" class="form-control" id="newTeam" name="newTeam" ngModel #newTeam="ngModel" placeholder="{{'words.name' | translate}}" required minlength="3">
        <div class="alert alert-danger" *ngIf="createTeamForm.submitted && !newTeam.valid">
            <div *ngIf="newTeam.errors.required">
                First name is required.
            </div>
            <div *ngIf="newTeam.errors.minlength">
                First name should be minimum {{ newTeam.errors.minlength.requiredLength }} characters.
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-default">{{ "words.send" | translate }}</button>
</form>

The newTeam.errors.required and newTeam.errors.minlength are highlighted as errors in TypeScript using WebStorm : Angular: Identifier 'minlength' is not defined. '__type' does not contain such a member

I don't get why and don't find how to fix this. The code is working properly, the errors are displayed as needed.

[EDIT] - submitted a bug report to IntelliJ, I'm pretty sure it's coming from there

Show us your Component, specifically where newTeam.errors is defined: you've tagged the question typescript but haven't shown any, and that's where the problem is ;) — msanford
– msanford, Commented Oct 13, 2017 at 14:01
Thanks for answering :) I actually tagged typescript because the highlight looked like being linked to it but I may have been wrong. Since it's an Angular template driven form, there is no explicit definition of newTeam.errors in the Component, it's automatically initialized by Angular itself. Also, it works perfectly. Only the highlight is faulty, I think. — Jeremy Belolo
– Jeremy Belolo, Commented Oct 14, 2017 at 17:42

lena · Accepted Answer · 2017-10-16 09:44:28Z

3

The error comes from Angular language service and, as such, has to be reported to Angular team. Issues that look similar: https://github.com/angular/angular/issues/15460, https://github.com/angular/vscode-ng-language-service/issues/126

answered Oct 16, 2017 at 9:44

lena

94.4k11 gold badges156 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular form validation highlight issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related