title: Angular 5 maxlength and alphanumeric validation
body: <p>I am trying to display error if user input is not alphanumeric following <a href="https://www.concretepage.com/angular-2/angular-2-4-minlength-and-maxlength-validation-example" rel="nofollow noreferrer">this</a> example, but without success. Error message is always displayed.</p>
  
  <p>This is code snippet:</p>
  
  <pre><code>&lt;div class="col-md-4" *ngIf="this.context.risk.contractOrigin === 'Appel_d_offre'"&gt;
      &lt;label class="control-label" for="numberTenderInvitation"&gt;Numéro d'appel d'offre&lt;/label&gt;
      &lt;input class="form-control" id="numberTenderInvitation" name="numberTenderInvitation"
             [(ngModel)]="context.risk.policyId"
             #numberTender="ngModel"
             maxlength="10"
             [pattern]="'^[a-zA-Z \-\']$'"
             required/&gt;
  &lt;/div&gt;
  &lt;small class="errorLabel" [hidden]="!numberTender.errors"&gt;
      Le champ comporte une erreur.
  &lt;/small&gt;
  </code></pre>
  
  <p>Error that I got is:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'errors' of undefined</p>
  </blockquote>
  
  <p>Where did I go wrong?</p>