Nebular Auth 角度验证

Question

我使用Nebular创建登录表单。但Nebular的形式使用电子邮件验证。我想禁用电子邮件验证，因为我的网站使用username.

Answer 1

我不认为有一个简单的配置选项可以更改user登录表单的属性。如果您查看登录表单的源代码，您会发现它user只是一个类型的对象any。这意味着您可以扩展NbLoginComponent并将字段[(ngModel)]的绑定更改email为username。（参见下面的工作堆栈闪电战）。

您必须创建自己的登录组件来扩展NbLoginComponent. 对于自定义登录组件，您不需要ts文件中的任何内容，您只需提供一个新模板并继承NbLoginComponent. pattern=".+@.+\..+"在模板中，您可以更改电子邮件输入的模型绑定，并从输入中删除电子邮件验证 ( )。

用户名-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 {
}

用户名-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>

然后在您的路由中，只需路由到您的自定义登录组件

应用程序路由.module.ts

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

在下面的 stackblitz 中我有一个工作示例。按下“登录”按钮后，我会收到一条警报，显示在发布请求中发送的对象。您还可以在开发工具的“网络”选项卡中检查请求以查看请求正文。

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