Malgré l'erreur ne peut pas lire la longueur de la propriété de null, le code fonctionne

Question

Cela semble très bien pour moi.

<mat-form-field class="example-medium-width"> 
    <textarea matInput name="description" [(ngModel)]="description" placeholder="Description" maxlength="50" #field_description="ngModel"> 
    </textarea> 
    <mat-hint align="end"> 
    {{field_description.value.length}}/50 Chars please. 
    </mat-hint> 
</mat-form-field> 

Mais pour une raison quelconque, le navigateur n'est pas content!

ERROR TypeError: Cannot read property 'length' of null at Object.eval [as updateRenderer] (CreateLearningPlanComponent.html:75)

Cependant, comme je tape des caractères dans l'élément de texte zone, je peux voir la valeur (le nombre actuel de caractères dans le texte de la zone qui est) est rapporté correctement! Donc je vois 1/50 ... 2/50. et ceci me dit cela et arrêtant l'entrée d'utilisateur finalement au 50ème char. Donc, le field_description.value.length semble être OK.

Mais alors la longueur de indéfini!

Mais pourquoi ai-je cette erreur sur le fichier console.log?

Answer 1

Vous devez utiliser l'opérateur de sécurité de la navigation,

<mat-hint align="end"> 
    {{field_description?.value?.length}}/50 Chars please. 
</mat-hint> 

Answer 2

Comment vous définissez le champ description dans votre classe de composants?

Si vous ne définissez pas de valeur par défaut, elle est indéfinie lorsque le formulaire apparaît pour la première fois afin que vous voyiez cette erreur.

Dès que vous commencez à taper, il n'est plus indéfini et fonctionne comme prévu.

Vous pouvez donc définir une valeur par défaut (telle qu'une chaîne vide) ou vous pouvez utiliser l'opérateur de navigation sécurisé comme d'autres l'ont suggéré.