Regex pattern validation Angularjs2

Question

I'm developing an Angular2 application. I'm trying to do a validation when login using a regex pattern.

login.component.ts

import { Component, OnInit } from '@angular/core';
import {AuthenticationService, User} from '../authentication-service.service';
import {TokenService} from '../token.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AuthenticationService,TokenService]

})

export class LoginComponent {

public user = new User('','','');
public errorMsg = '';

constructor(private _service:AuthenticationService) {
    var ssnRegex='^(\d{6}|\d{8})[-|(\s)]{0,1}\d{4}$';
    this.logout();
}

  login() {
      if(!this._service.login(this.user)){
          this.errorMsg = 'Failed to login';
      }
  }

  logout(){
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      localStorage.removeItem("paydid");
  }
}

login.component.html

<form id="login-form" action="" method="post" role="form" style="display: block;" #roomForm='ngForm'>
        <div class="form-group">
                        <input type="text" required maxlength="12" minlength="12" [pattern]="ssnRegex" ngModel name="capacity" #capacity='ngModel' [(ngModel)]="user.ssn" name="ssn" id="ssn" tabindex="1" class="form-control input-box" placeholder=" Personnummer (ååååmmddnnnn)"
                            value="">
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-4 col-sm-offset-4">
                                <span style="color:red; float:left; width: 100px;">{{errorMsg}}</span>
                                <button (click)="login()" class="btn waves-effect waves-light" type="submit" name="action">Login</button>
                            </div>
                        </div>
                    </div>l
                </form>

This is what I have done up to now. But this is not doing the expected validation when login. At the same time, I need to show an error message if the entered string is not following the pattern. I'm new to Angualrjs. Help appreciated. Thanks!

what does 'not doing as expected' means? Passing validation when it shouldn't? — Sefa
– Sefa, Commented Oct 21, 2016 at 12:15
@Sefa Ümit Oray;Thanks for replying. That means when someone trying to login and if it got failed it's because of the person is not authenticated which i haven't showed the code here because it is irreverent here. The above code is not checking whether the entered string is inline with that regex pattern i have mentioned. — Isuru
– Isuru, Commented Oct 21, 2016 at 12:49

Bazinga · Accepted Answer · 2016-10-21 14:05:37Z

1

You need to change to:

this.ssnRegex='^(\d{6}|\d{8})[-|(\s)]{0,1}\d{4}$';

Example:

@Component({
  selector: 'my-app',
  template: `
    <form #roomForm="ngForm">
       <input type="text" [pattern]="ssnRegex" [(ngModel)]="user.ssn" name="ssn" required #ssn="ngModel">
      {{ssn.valid}}
    </form>
  `,
})
export class App {
  constructor() {
    this.user = {ssn: ""};
    this.ssnRegex = "[A-Za-z]{3}" // Only 3 letters allowed for example
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  providers: [SessionService],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker

edited Oct 21, 2016 at 14:05

answered Oct 21, 2016 at 12:40

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

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

4 Comments

Isuru Over a year ago

Thanks a lot for helping me. I tried your code and for every text i enter login() method executes. And it comes to error part since user.ssn is empty. This means still it doesn't do the validation expected. In your code i see that it is missing the data binding of user.ssn. In your code it's ssn. Im confused a bit. And is SessionService necessary here? Please help. Im still struggling.

Isuru Over a year ago

Now when logged in authentication works. But it doesn't check for this pattern. Do i have to import something to get this working?

Bazinga Over a year ago

You need to check the pattern, because this code works, maybe there is a bug in your pattern

Isuru Over a year ago

Sorry for the late reply. Yes you were correct. The pattern was incorrect. Now everything works well. Thanks for helping me..

Collectives™ on Stack Overflow

Regex pattern validation Angularjs2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related