textarea中的maxlength在Angular中不起作用(maxlength in textarea not working in Angular)

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

错误TypeError：无法读取null的属性'maxlength'

我使用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。 不确定是否会导致问题。 
I'm using maxlength in my form but it is throwing the error
 
 
 
ERROR TypeError: Cannot read property 'maxlength' of null
 
 
Part of the form where I'm using 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>
 
The model object looks like this when the page loads
 
this.model = {
            description: '',
            title: '',
        }
 
As soon as I type something into the textarea the error starts to come up. 
 
I have a directive also bound to the textarea. Not sure if that is causing the problem.
                
最满意答案
                
                    
                        
 它抱怨尚不存在的东西的长度：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 
It's complaining about the length of something that doesn't exist yet: videoDescription?.errors. 
 
You can add the safe navigation operator after errors videoDescription.errors?.maxLength. Like in this example:
 
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>
 
Typescript
 
titleModel= 'I have more than 10 characters'
 
DEMO
 
This works, but maxLength prevents entering more characters after the limit, so the validation message will be show only if you set it programatically.
 
 
 If you wish it to let the user enter and then react, you can forgo the above with this implementation (example): 
 
<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