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? http://stackoverflow.com/questions/39236992/how-to-validate-white-spaces-empty-spaces-angular-2 — Bean0341, Jan 03 '17 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, Jan 03 '17 at 17:58

score 20 · Accepted Answer · answered Jan 03 '17 at 17:47

20

try:

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

answered Jan 03 '17 at 17:47

Meir

14,081
4
39
47

3

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 – Syntactic Fructose Jan 03 '17 at 17:57

score 0 · Answer 2 · answered Jan 14 '20 at 22:49

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});
        }
    }

Angular2 restrict white space within template-driven input field

2 Answers2

Linked