模板驱动形式的最小长度误差(角度8)

时间:2020-05-28 16:40:48

标签: typescript angular8

单击“提交”按钮时出现错误提示。

ERROR TypeError: Cannot read property 'minlength' of null

我不知道为什么会收到此错误。因此如何解决此问题。

app.component.html:

<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<div class="form-group">
                <label for="categoryName">Category Name:</label>
                <input type="text" class="form-control" name="categoryName" [(ngModel)]="cate.categoryName" minlength="5" #categoryname="ngModel" [ngClass]="{ 'is-invalid': f.submitted && categoryName.invalid }" required/>
                <div *ngIf="f.submitted && categoryName.invalid" class="invalid-feedback">
                    <div *ngIf="categoryName.errors.required">
                        Category Name is required
                    </div>
                </div>
                <div *ngIf="categoryName?.touched && categoryName?.errors.minlength" class="invalid-feedback">
                    Category Name must be at least 5 characters long.
                </div>
            </div>
</form>

1 个答案:

答案 0 :(得分:1)

由于您删除了错误的根源,因此我假设错误来自

此行:

<div *ngIf="categoryName?.touched && categoryName?.errors.minlength" class="invalid-feedback">

此处categoryName?.errors为空,并且您尝试使用此空值访问minlength

为避免此错误,请在?之前添加.minlength运算符,例如:

<div *ngIf="categoryName?.touched && categoryName?.errors?.minlength" class="invalid-feedback">