Validation doesn't happen

Question

 saveItemComment(itemComment: ItemComment) {
    if (itemComment && itemComment.itemNo) {
       if (itemComment.comment && itemComment.comment.length > 5) {
           this.messageService.showCommentLimitExceedMessage();
           return;
       }

      // 1. persist the new or modified itemComment
      this.http.put(this.itemCommentServerPath + itemComment.itemNo, itemComment).subscribe(data => {
        if (data) {
          console.log('server answered ' + data);
        }
        this.messageService.showCustomSuccessMessage(this.translateService.instant("ASSESSMENT.DETAIL.DETAIL-ENTRY.ITEM_COMMENT.successfulSave"));
      }, error => {
        this.messageService.showCustomFailedMessage(this.translateService.instant("ASSESSMENT.DETAIL.DETAIL-ENTRY.ITEM_COMMENT.unsuccessfulSave"));
      });
    }
  }

I take this itemComment.comment && itemComment.comment.length to check if more than 5 then return with message this is my

export interface ItemComment {
    itemNo: string;
    comment?: string;
}

i even did if true but didn't see error message save just worked

I tried putting that if and then

  <label class="bmwLabel" for="itemcommentinput">
        {{ 'ASSESSMENT.DETAIL.DETAIL-ENTRY.ITEM_COMMENT.itemCommentLabel' | translate }}
      </label>
      <textarea id="itemcommentinput" rows="50" pInputTextarea class="bmwInput"
                style="width: 100%; height: 74.8vh;"
                [(ngModel)]="itemComment.comment" >
</textarea>
      <div *ngIf="itemComment.comment && itemComment.comment.length > 5" style="color: red;">Maximum length exceeded</div>

still doesn't work

Answer 1

i think you forgot to add CommonModule, FormsModule in imports. please check my stackblitz link. might be it helpful to you.