星云验证 Angular 验证

Question

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

Answer 1

我认为没有简单的配置选项可以更改登录表单的 user 属性。如果查看 login form 的源代码，您会发现 user 只是一个 any 类型的对象。这意味着您可以扩展 NbLoginComponent 并将 email 字段的 [(ngModel)] 绑定更改为 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>

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

应用-routing.module.ts

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

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

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

星云验证 Angular 验证

Nebular Auth Angular Validation

angular

nebular

用户名-login.component.ts

用户名-login.component.html

应用-routing.module.ts