Search code examples
angulartypescriptintellij-ideaphpstormangular2-forms

Angular form validation highlight issue


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


Solution

  • 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