Nebular Auth Angular Validation

Question

I use Nebular to create login form. But the form of Nebular using email validation. I want to disable email validation because my website using username.

Answer 1

I don't believe there is an easy configuration option to change the user properties of the login form. If you look at the source of the login form you can see the user is just an object of type any. This mean you can extend the NbLoginComponent and change the [(ngModel)] binding for the email field to username. (see below for a working stackblitz).

You'll have to create your own login component extending NbLoginComponent. For the custom login component you don't need anything in your ts file, you are only providing a new template and inheriting all the functionality of NbLoginComponent. In the template you can change the model binding for the Email input and remove the email validation (pattern=".+@.+\..+") from the input.

username-login.component.ts

import { Component } from '@angular/core';
import { NbLoginComponent } from '@nebular/auth';

@Component({
  selector: 'username-login',
  templateUrl: './login.component.html',
})
export class UsernameLoginComponent extends NbLoginComponent {
}

username-login.component.html

... omitted
<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">

  <div class="form-control-group">
    <label class="label" for="input-email">Email address:</label>
    <input nbInput
           fullWidth
           [(ngModel)]="user.username"
           #username="ngModel"
           name="username"
           id="input-username"
           placeholder="Username"
           fieldSize="large"
           autofocus
           [status]="username.dirty ? (username.invalid  ? 'danger' : 'success') : 'basic'"
           [required]="getConfigValue('forms.validation.username.required')"
           [attr.aria-invalid]="username.invalid && username.touched ? true : null">
    <ng-container *ngIf="username.invalid && username.touched">
      <p class="caption status-danger" *ngIf="username.errors?.required">
        Username is required!
      </p>
    </ng-container>
  </div>
  ...
</form>

Then in your routes, just route to your custom login component

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full',
  },
  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: UsernameLoginComponent,
      }
    ],
  },
];

In the stackblitz below I have a working example. After Log In button is pressed, I have an alert showing the object that is sent in the post request. You can also check the request in the Network tab of the dev tools to see the request body.

STACKBLITZ: https://stackblitz.com/edit/nebular-dynamic-auth-api-laoksx

https://github.com/akveo/nebular/tree/master/src/framework/auth/components

https://akveo.github.io/nebular/docs/auth/custom-auth-components#create-auth-module