如何以角度反应形式验证字段？答案

【问题标题】：how to validate field in angular reactive form?如何以角度反应形式验证字段？
【发布时间】：2018-12-28 12:51:48
【问题描述】：

我正在尝试使用响应式表单以角度验证我的表单。很少有字段示例 card name 用户仅输入 string

所以他尝试输入除字符串以外的任何内容，我需要显示无效消息。我尝试过这样

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [(Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"))]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }

当我运行我的application 时，我的表单已经有效，为什么？它应该只在用户enter string时有效

【问题讨论】：

不要等待答案（这会很长，所以没有多少人愿意花时间写一些已经在 Angular 指南中详细解释过的东西），阅读angular.io/guide/reactive-forms

标签： javascript angular

【解决方案1】：

删除Validators 数组中多余的括号()。 Validators 应作为数组发送。添加()后，它们被视为一项，这是错误的结果。

this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+")] // see this line
      ],

Stackblitz

【讨论】：

嗨，它可以正常工作，但是为什么当我输入a 或当我输入any charter 时它无效。在绑定第二个字符后它显示有效
因为您的验证 Validators.pattern("[a-zA-Z][a-zA-Z ]+") 至少需要 2 个字符
如果你只想要一个，那么你可以做Validators.pattern("[a-zA-Z]+")
你能告诉我一件事，我将如何添加16数字卡号的模式..用户只在卡号中输入数字，确切的16
查看帖子stackoverflow.com/questions/9315647/… 应该对你有帮助。

【解决方案2】：

为此任务编写 1 个自定义验证器。我在这里添加了 1 个示例，只需在验证器中更改您的条件即可。

import { AbstractControl } from '@angular/forms';

export function SameEmail(control: AbstractControl) {
    let email = window.localStorage.getItem("user");
    if (control.value == email) {
        return { validEmail : true };
    } else {
        return null;
    }
   
}


this.customForm = this.formBuilder.group({
        'email': new FormControl(this.customForm.email, [
          Validators.required,
          SameEmail
        ])
      });

<div *ngIf="form.email.invalid && (form.email.dirty || form.email.touched)" class="alert alert-danger">
              <div *ngIf="form.email.errors.required">
                Error 1
              </div>
              <div *ngIf="form.email.errors.validEmail">
                Error 2
              </div>
            </div>

【讨论】：

【解决方案3】：

只需添加Validators.minLength(1) 确保他输入至少一个字符，Validators.pattern("[a-zA-Z][a-zA-Z ]+") 将检查他是否输入有效名称

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"),Validators.minLength(1)]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }

【讨论】：

【解决方案4】：

您可以使用 formGroup 错误检查来确保它正常工作。 yourForm.get('cardname').hasError('required') 您还可以检查在您的 HTML 中添加一些额外的 div，这些 div 将在用户实时执行错误时显示。这是检查是否需要元素的示例：

<div *ngIf="yourFormGrup.get('cardname').hasError('required')">Card name is required.</div>

仅当您的表单组包含指定的错误时才可见。这里有一些 extra reading for you 应该可以帮助你。

【讨论】：