Angular2 restrict white space within template-driven input field

Question

Preface: I am not trying to use reactive forms

What is the proper way to restrict white space in Angular2? I see this answer for AngularJS, but I am not sure if there is a better way to do this in Angular2. Say I have:

        <input
          placeholder="alert tag (25 max)"
          maxlength="25"
          value="alert"
          type="text"
          #alertTagInput
          [(ngModel)]="alertTag" >

The user can currently type in whitespace, how do I restrict that?

is this a similar issue? stackoverflow.com/questions/39236992/… — Bean0341
– Bean0341, Commented Jan 3, 2017 at 17:25
@Bean0341 sort of, but I don't want to use reactive forms, I'm trying to stick with template driven forms. — Syntactic Fructose
– Syntactic Fructose, Commented Jan 3, 2017 at 17:58

Meir · Accepted Answer · 2017-01-03 17:47:23Z

20

try:

(keydown.space)="$event.preventDefault()"

answered Jan 3, 2017 at 17:47

Meir

14.4k4 gold badges44 silver badges49 bronze badges

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

1 Comment

Syntactic Fructose Over a year ago

Worked great, I also did onDrag="return false" onDrop="return false" onPaste="return false" because I don't want users pasting stuff into the input box

Harish Verma · Accepted Answer · 2020-01-14 22:49:38Z

Try this one using this also set angular error.

form field

                         <input #name
                           formControlName="account_nick"
                           id="name"
                           maxlength="90"
                           minlength="5"
                           placeholder="eg. my name "
                           (keyup)="noSpace($event)"
                           required
                           type="text"
                           >

js code

 this.countSpace = [];  //make a array 
 noSpace(key) { //log key and apply condition as you want 
        if (key.code === 'Space') {
            this.countSpace.push(key.code);
        }
        if (key.key.length === 1) { //if some one enter a only one value or one space 
            this.myform.controls['account_nick'].setErrors({'incorrect': true});
        }
        if (this.countSpace.length > 5) { // if name have more then 5 space 
            this.myform.controls['account_nick'].setErrors({'incorrect': true});
        }
    }

Collectives™ on Stack Overflow

Angular2 restrict white space within template-driven input field

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related