Question

我正在尝试使用反应形式来验证我的表单。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

时才有效

Answer 1

以undefined格式删除多余的括号()。 Validators应该作为数组发送。添加Validators之后，它们被视为一个单独的项目，这将导致错误的结果。

()

Stackblitz

Answer 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>

Answer 3

只需添加def __init(self)__，确保他输入了至少一个字符，然后Validators.minLength(1)就会检查他是否输入了有效的姓名

Validators.pattern("[a-zA-Z][a-zA-Z ]+")

Answer 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应该可以帮助您。

如何验证角反应形式的场？

4 个答案: