Nebular Auth Angular Validation - PullRequest
Новая
       0

Nebular Auth Angular Validation

1 голос
/ 21 января 2020

Я использую Nebular для создания формы входа. Но форма Nebular использует проверку электронной почты. Я хочу отключить проверку электронной почты, потому что мой сайт использует username.

enter image description here

1 Ответ

2 голосов
/ 21 января 2020

Я не верю, что есть простая опция конфигурации для изменения свойств user формы входа. Если вы посмотрите на источник формы входа , вы увидите, что user - это просто объект типа any. Это означает, что вы можете расширить NbLoginComponent и изменить привязку [(ngModel)] для поля email на username. (см. ниже рабочий стек стека).

Вам нужно будет создать свой собственный компонент входа, расширяющий NbLoginComponent. Для пользовательского компонента входа в файл ts вам ничего не нужно, вы только предоставляете новый шаблон и наследуете все функции NbLoginComponent. В шаблоне вы можете изменить привязку модели для ввода Email и удалить подтверждение ввода (pattern=".+@.+\..+") из ввода.

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>

Затем в ваших маршрутах просто проложите маршрут к пользовательскому компоненту входа в систему

app-routing.module.ts 

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

В приведенном ниже стекаблице у меня есть рабочий пример. После нажатия кнопки «Войти» у меня появляется предупреждение об объекте, который отправляется в запросе на публикацию. Вы также можете проверить запрос на вкладке Сеть инструментов разработчика, чтобы увидеть тело запроса.

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-модуль

...