Question

我在我的表单中使用了maxlength，但它正在抛出错误

ERROR TypeError：无法读取属性＆＃39; maxlength＆＃39;为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中输入内容，就会出现错误。

我有一个指令也绑定到textarea。不确定是否会导致问题。

Answer 1

它抱怨尚未存在的东西的长度：videoDescription？.errors。

您可以在<header> <div id="links"> <a href="#">Link nr. 1</a> <a href="#">Link nr. 2</a> <a href="#">Link nr. 3</a> </div> </header> videoDescription.errors？.maxLength之后添加安全导航操作符。就像在这个例子中一样：

<强> HTML

errors

<强>打字稿

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

<强> DEMO

这样可行，但maxLength会阻止在限制后输入更多字符，因此只有在以编程方式设置验证消息时才会显示验证消息。

<小时/> 如果您希望让用户进入然后做出反应，您可以放弃上述实现（示例）：

titleModel= 'I have more than 10 characters'

DEMO

textarea中的maxlength在Angular中不起作用

1 个答案: