textarea中的maxlength在Angular中不起作用
Posted
技术标签:
【中文标题】textarea中的maxlength在Angular中不起作用【英文标题】:maxlength in textarea not working in Angular 【发布时间】:2018-04-03 17:57:19 【问题描述】:我在表单中使用了 maxlength,但它抛出了错误
ERROR TypeError: Cannot read property 'maxlength' of null
我使用 maxlength 的部分表格:
<div>
<textarea AutoExpandTextArea [inputData]='model.title' maxlength="100" class="videoTitle" name="videoTitle" id="videoTitle" #videoTitle="ngModel" placeholder="Title" [(ngModel)]="model.title" required>model.title</textarea>
<span class="text-danger" *ngIf="submitted && loginform.form.invalid && videoTitle.errors.required">Title is mandatory</span>
<span class="text-danger" *ngIf="videoTitle.dirty && videoTitle?.errors.maxlength">Maximum 100 characters are allowed</span>
<textarea AutoExpandTextArea [inputData]='model.description' maxlength="120" class="videoDescription" id="videoDescription" name="videoDescription" #videoDescription="ngModel" placeholder="Description" [(ngModel)]="model.description">model.description</textarea>
<span class="text-danger" *ngIf="videoDescription.dirty && videoDescription?.errors.maxlength">Maximum 120 characters are allowed</span>
</div>
页面加载时模型对象如下所示
this.model =
description: '',
title: '',
只要我在 textarea 中输入内容,错误就会开始出现。
我有一个指令也绑定到文本区域。不确定这是否导致了问题。
【问题讨论】:
我不知道是不是你的错误,但是属性值不应该都用双引号吗? @jonrsharpe:引号不会导致错误。 【参考方案1】:它在抱怨尚不存在的内容的长度:videoDescription?.errors。
您可以在errors
videoDescription.errors?.maxLength 之后添加安全导航运算符。就像在这个例子中一样:
HTML
<textarea required maxlength="10"
name="titleId" [ngModel]="titleModel"
(ngModelChange)="titleModel = $event + ''" #titleId="ngModel" ></textarea>
<span style="color:red" *ngIf="titleId.errors?.required">
required
</span>
<span style="color:red" *ngIf="titleId.errors?.maxlength">
10 max
</span>
打字稿
titleModel= 'I have more than 10 characters'
DEMO
这可行,但 maxLength 会阻止在限制之后输入更多字符,因此只有在您以编程方式设置时才会显示验证消息。
如果你想让用户输入然后做出反应,你可以放弃这种实现:
<textarea class="form-control" id="title" maxlength="10"
name="title" [(ngModel)]="titleModel"></textarea>
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
DEMO
【讨论】:
我知道但想知道它是否适用于正常的角度验证。由于某种原因,角度验证即 error.maxlength(有或没有安全导航)不起作用。所以我不得不使用模型值的长度。 这是一个输入而不是 textarea。问题在于 textarea.inputs 工作正常! React 示例的 plunkr 包含无效属性。固定here 虽然我同意 type="number",这是我不记得的东西的“剩余”,但 maxlength 属性是有效的,虽然没有使用 同意,maxlength 是一个有效的属性,但它会阻止超过 10 个字符输入到 textarea 中,因此永远不会触发验证错误。应该使用 html5 maxlength 属性或 Angular maxLength 验证器,但不能同时使用 IMO(找不到任何支持此的文档)。以上是关于textarea中的maxlength在Angular中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
[转]TextArea设置MaxLength属性最大输入值的js代码
Chrome 在 textarea 中使用 maxlength 属性计数错误的字符
Html textarea - maxlength后的颜色字符
JavaScript 在页面上为所有textareas强制执行maxlength