How to add blank space validation in template driven form in angular

Question

Here form code available. This form type is template driven form In this form SUBSCRIPTION_ID input available. I need add validation like only blank space not allowed.

<form name="ResgisterData" #resgisterData = "ngForm"  (ngSubmit)="signUp(resgisterData.value)" novalidate>
<label>SUBSCRIPTION_ID</label>
<input type="text" [ngClass]="{ 'alert-danger' : subscriptionId.touched && subscriptionId?.errors?.required }" role="textbox" name="Guid" #subscriptionId="ngModel" [(ngModel)]="attendeLabDetails.SubscriptionGuid" autocomplete="off"  class="form-control" required />
<button role="button" class="btn btn-primary blue" [disabled]="resgisterData.invalid">Register </button>
</form>

use pattern attribute with regex value of /^\S*$/

Stavm
– Stavm

2021-07-16 06:33:14 +00:00
Commented Jul 16, 2021 at 6:33 — Stavm
– Stavm, Commented Jul 16, 2021 at 6:33

Terrance00 · Accepted Answer · 2021-07-16 06:48:58Z

2

Steps

Refer to angular docs:

You could create a validator directive.

Use ng generate to generate a new directive called WhiteSpaceValidator
After you've done this implement the validator interface in your directive: Validator
Add the code to check for whitespaces
Add directive to your input

Validator File

@Directive({
  selector: '[whiteSpaceValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: WhiteSpaceValidatorDirective, multi: true}]
})
class WhiteSpaceValidatorDirectiveimplements Validator {
  validate(control: AbstractControl): ValidationErrors|null {
    /*
    Your validation code here.
    */
    return {'whiteSpace': true};

  }
}

Your subscriptionId?.errors will then have the property 'whiteSpace': true

answered Jul 16, 2021 at 6:48

Terrance00

1,6981 gold badge21 silver badges30 bronze badges

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

2 Comments

Hiren Nakrani Over a year ago

Any other solution available?

Terrance00 Over a year ago

Sure - there are quite a number of options, but I would recommend the above for angular. You could do some other operations on blur/keyup that could perhaps automatically remove spaces - depends on what you want to achieve.

Collectives™ on Stack Overflow

How to add blank space validation in template driven form in angular

1 Answer 1

Steps

Validator File

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Steps

Validator File

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related