maxlength in TextArea- arbeiten nicht in Schräg

Question

ich maxlength in meiner Form bin mit aber es wirft den Fehler

ERROR TypeError: Cannot read property 'maxlength' of null

Ein Teil der Form, wo ich bin mit 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> 

Die Modellobjekt sieht wie folgt aus, wenn die Seite geladen wird

this.model = { 
      description: '', 
      title: '', 
     } 

sobald ich etwas in das Textfeld geben Sie den Fehler zu kommen beginnt.

Ich habe eine Direktive auch an die Textarea gebunden. Nicht sicher, ob das das Problem verursacht.

Answer 1

Es beschwert sich über die Länge von etwas, das noch nicht existiert: videoDescription? .errors.

Sie können den sicheren Navigationsoperator nach errors videoDescription.errors? .maxLength hinzufügen. Wie in diesem Beispiel:

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> 

Typoskript

titleModel= 'I am more than 10 characters' 

DEMO

Dies funktioniert, aber maxLength verhindert weitere Zeichen nach dem Grenzwert Eingabe, so das Die Validierungsnachricht wird nur angezeigt, wenn Sie sie programmatisch festlegen.

---

Wenn Sie es wünschen, geben Sie den Benutzer zu lassen und dann reagieren, können Sie die oben mit dieser Implementierung (Beispiel) verzichten:

<textarea class="form-control" id="title" maxlength="10" 
type="number" name="title" [(ngModel)]="titleModel"></textarea> 
<span style="color:red" *ngIf="titleModel?.length > 10"> 
     10 max 
</span> 

DEMO