我有以下 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 属性是否不够?
是否有另一种方式来声明 minlength 验证器而不是编程方式,即
this.name = new Control('', Validators.minLength(4));
?
最佳答案
我遇到了同样的问题,即 TypeError: Cannot read property 'minlength' of null
。对我来说,@yurzui 提出的方案解决了问题。我将其添加为此处的答案(如@günter-zöchbauer 所建议),以便其他人(可能不会阅读评论)可以轻松找到它。
问题:
在定义 errors
之前,可以访问 minlength
属性:
<div *ngIf="firstName.errors.minlength">
Too short
</div>
解决方案:
在访问其 minglength
属性之前,使用 ?
运算符确保定义了 errors
:
<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
!
关于angular - angular 2 ngControl 的最小长度错误验证器出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37238646/