angular 2 ngControl 的最小长度错误验证器出现问题

Question

我有以下 angular 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>

然而，当我在浏览器中加载表单时出现以下错误，errors 似乎为空：

TypeError: Cannot read property 'minlength' of null

我在这里弄错了什么？

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

是否有另一种方式来声明最小长度验证器而不是以编程方式，即

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

?

Answer 1

我遇到了同样的问题，即TypeError: Cannot read property 'minlength' of null。对我来说，@yurzui 提出的方案解决了问题。我将其添加为此处的答案（如@günter-zöchbauer 所建议），以便其他人（可能不会阅读评论）可以轻松找到它。

问题：

minlength 属性可能被访问，在 errors 被定义之前：

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

解法：

使用 ? 运算符确保 errors 已定义，然后再访问其 minglength 属性：

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

备选方案：

将您的 div 包裹在另一个 div 中，检查 errors 是否已定义：

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

请注意，两种解决方案均假定已定义 firstName。

PS：有需要的朋友，errors.maxlength也一样！

Answer 2

// 这样对我有用

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

</div>

angular 2 ngControl 的最小长度错误验证器出现问题

Issue with angular 2 ngControl's minlength errors validator

angular2-forms

angular