Question

我已经创建了一个表单，并且功能正常运行，但是我在验证方面遇到了一些问题。

验证不起作用，如果表单中有任何错误，我想限制表单提交，还想对电子邮件（如果是电子邮件字段），文本输入和数字输入应用验证。

您可以在此处查看我的代码：https://stackblitz.com/edit/angular-ay58g9

Answer 1

请尝试这个。我使用的是角形材料，所以也请看一下

<form name="f" (ngSubmit)="f.form.valid && submitForm(f)" #f="ngForm" novalidate>
  <mat-form-field class="w-100">
    <mat-label>First Name</mat-label>
    <input type="text" matInput name="firstName" [(ngModel)]="data.firstName" #firstName="ngModel" required>
    <mat-error *ngIf="firstName.invalid">
      <span *ngIf="firstName.errors.required">Firstname Is Required</span>
    </mat-error>
  </mat-form-field>

  <mat-form-field class="w-100">
    <mat-label>Email</mat-label>
    <input type="text" matInput name="email" [(ngModel)]="data.email" #email="ngModel" required
      pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required (keyup)="findDuplicateUserEmail(f)">
    <mat-error *ngIf="email.invalid">
      <span *ngIf="email.errors && email.errors.required">Email Is Required</span>
      <span *ngIf="email.errors && email.errors.pattern"> Email Is Incorrect</span>
    </mat-error>
  </mat-form-field>

  <button type="submit" mat-raised-button color="primary">Create</button>
</form>

Answer 2

我喜欢

net.c:226:Connecting to 40.121.158.30 port 1433 (TDS version 7.1)
net.c:252:tds_open_socket: connect(2) returned "Operation now in progress"
net.c:372:tds_open_socket() succeeded
packet.c:742:Sending packet
0000 12 01 00 34 00 00 00 00-00 00 15 00 06 01 00 1b |...4.... ........|
0010 00 01 02 00 1c 00 0c 03-00 28 00 04 ff 08 00 01 |........ .(......|
0020 55 00 00 02 4d 53 53 51-4c 53 65 72 76 65 72 00 |U...MSSQ LServer.|
0030 a8 19 00 00            -                        |....|

packet.c:640:Received packet
0000 04 01 00 25 00 00 01 00-00 00 15 00 06 01 00 1b |...%.... ........|
0010 00 01 02 00 1c 00 01 03-00 1d 00 00 ff 0c 00 07 |........ ........|
0020 6c 00 00 03 00         -                        |l....|

login.c:1216:detected flag 3
login.c:534:login packet rejected
query.c:3797:tds_disconnect()

在.ts

中

<!--pass the form-->
<form [formGroup]="form" (ngSubmit)="submit(form)">

提交表单时表单验证不起作用

2 个答案: