Angular 5 maxlength and alphanumeric validation

Question

I am trying to display error if user input is not alphanumeric following this example, but without success. Error message is always displayed.

This is code snippet:

<div class="col-md-4" *ngIf="this.context.risk.contractOrigin === 'Appel_d_offre'">
    <label class="control-label" for="numberTenderInvitation">Numéro d'appel d'offre</label>
    <input class="form-control" id="numberTenderInvitation" name="numberTenderInvitation"
           [(ngModel)]="context.risk.policyId"
           #numberTender="ngModel"
           maxlength="10"
           [pattern]="'^[a-zA-Z \-\']$'"
           required/>
</div>
<small class="errorLabel" [hidden]="!numberTender.errors">
    Le champ comporte une erreur.
</small>

Error that I got is:

ERROR TypeError: Cannot read property 'errors' of undefined

Where did I go wrong?

Julian Hansen · Accepted Answer · 2018-04-19 06:05:54Z

6

Your pattern has a few problems

1. It is checking for a single character only
   ^ start of string
   [ ... ] match 1
   $ end of string
If you require at least one character you need to add a '+' if 0 or more a '*'

2. You say non-alphanumeric but you are not checking specifically for digits, you should add 0-9 to your pattern

3. Try moving your [\-] after the [\'] so your final pattern is as follows (assuming you want at least one char as input)

[pattern]="'^[a-zA-Z0-9 \'\-]+$'"

answered Apr 19, 2018 at 6:05

Julian Hansen

611 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Nenad Bulatović · Accepted Answer · 2018-04-19 07:07:10Z

2

For the sake of reference I am posting final solution:

<div class="col-md-4" *ngIf="this.context.risk.contractOrigin === 'Appel_d_offre'">
    <label class="control-label" for="numberTenderInvitation">Numéro d'appel d'offre</label>
    <input class="form-control" id="numberTenderInvitation" name="numberTenderInvitation"
           #numberTender="ngModel"
           [(ngModel)]="context.risk.policyId"
           maxlength="10"
           [pattern]="'^[a-zA-Z0-9 \'\-]+$'"
    required/>
    <small class="errorLabel" [hidden]="numberTender.pristine || numberTender.valid">
        Le champ comporte une erreur.
    </small>
</div>

answered Apr 19, 2018 at 7:07

Nenad Bulatović

7,45415 gold badges88 silver badges117 bronze badges

Comments

Syntactic Fructose · Accepted Answer · 2018-04-18 16:38:34Z

1

You're missing the elvis operator. This is required because your <small element is likely trying to access numberTender because it's been fully initialized. Try this:

<small class="errorLabel" [hidden]="numberTender?.errors">
    Le champ comporte une erreur.
</small>

I also removed the ! so this logic reads: If number Tender exists and it has an errors property

answered Apr 18, 2018 at 16:38

Syntactic Fructose

20.3k26 gold badges102 silver badges187 bronze badges

1 Comment

Nenad Bulatović Over a year ago

Actually it has to have ! as error message has to be hidden if there are no errors, but despite that, neither yours or this solution works. Any idea why? <small class="errorLabel" [hidden]="!(numberTender?.errors.pattern && !focused)

Oscar · Accepted Answer · 2019-05-23 00:42:53Z

0

try with this.

      <small  [hidden]="numberTender.valid" class="errorLabel" >
         Le champ comporte une erreur.
      </small>

answered May 23, 2019 at 0:42

Oscar

1

Collectives™ on Stack Overflow

Angular 5 maxlength and alphanumeric validation

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related