角度2 ngControl的最小长度误差验证器问题

发布时间：2020-12-17 17:50:36 所属栏目：安全来源：网络整理

导读：我有以下角度2形式： 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" #firstN

我有以下角度2形式：

<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>

但是,当我在浏览器中加载表单时出现以下错误,似乎错误为空：

TypeError: Cannot read property 'minlength' of null

我在这里弄错了什么？

模板中minlength属性的声明性使用是不够的？

是否有另一种方式来声明minlength验证器而不是以编程方式声明

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

？

解决方法

我遇到了同样的问题,即TypeError：无法读取null的属性’minlength’.对我来说,@ yurzui提出的解决方案解决了这个问题.我在这里添加它作为答案(正如@günter-z?chbauer所建议的那样),以便其他人(可能不会阅读评论)可以轻松找到它.

问题：

在定义错误之前,可以访问minlength属性：

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

解：

使用？运算符,以确保在访问其minglength属性之前定义错误：

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

替代方案：

将div包装在另一个div中,检查是否定义了错误：

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

请注意,两个解决方案都假定已定义firstName.

PS：对于任何需要它的人来说,同样适用于errors.maxlength！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!