Nebular Auth角度验证 [英] Nebular Auth Angular Validation

问题描述

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

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.

推荐答案

我不认为有一个简单的配置选项可以更改登录表单的user属性.如果您查看

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).

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

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.

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

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

这篇关于Nebular Auth角度验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！