Angular 4 表单验证和错误消息

Posted 2023-03-13

【中文标题】Angular 4 表单验证和错误消息

【英文标题】：Angular 4 form validation and Error Message

【发布时间】：2018-03-27 06:25:01

【问题描述】：

我必须在我的应用程序中实现表单验证。我正在使用 Angular 4。我的应用程序中还有 10 个表单。我不知道我的问题是否有效。我真的对这个实现感到困惑。

我的问题： 我需要在表单字段中添加验证，包括强制性和验证，如电子邮件、电话号码等，如果用户输入表单，用户知道某些字段，用户可能不知道需要填写其他字段。但需要保存有效字段，并需要在表单中显示错误信息。

我如何在使用 Angular 4 的前端和使用 nodejs 的后端实现

【问题讨论】：

正如所写，这个问题相当广泛。添加您正在处理的一种表单的示例可能会有所帮助。 Angular 有一个包含表单验证示例的文档：angular.io/guide/form-validation。希望这有助于您入门。

@stealththeninja 这不仅仅是验证。我需要验证字段，同时我需要将有效字段仅保存到 db 。我可以做的一件事是需要在保存之前检查每个字段是否有效，我认为这不是个好主意。还有其他建议吗？

我建议创建一个最小的、完整的、可验证的示例：***.com/help/mcve。除此之外，我们猜测您正在尝试构建并重复或链接到 Angular 文档。

【参考方案1】：

我建议在处理表单时使用 ReactiveFormsModule。如果您不熟悉它，请查看文档，但它应该不是什么大问题，因为它非常简单。

form: FormGroup;

constructor(formBuilder: FormBuilder)
    this.form = formBuilder.group(
        name: ['', Validators.required],
        lastName: '',
        email: ['', [Validators.required, Validators.email]]
     );
 

所以基本上这里发生的事情是我们在使用 Reactive Forms 时需要一个 FormGroup 实例。我们使用FormBuilder 类并调用其group 方法，该方法接受我们要创建的表单对象并返回FormGroup 实例。我们传递的对象的每个属性都将被称为 FormGroup 的 FormControls，因此在此示例中，我们声明了一个 FormGroup，其中包含三个 FormControl，分别称为 name、lastName 和 email。

这些 FormControls 的值用于初始化，它可以是该 FormControl 的实际值或一个数组，其中第一个元素将是该 FormControl 的值，第二个元素将是 ValidatorFn 或数组的ValidatorFn。

如您所见，我们这样定义名称 FormControl：name: ['', Validators.required]，这意味着初始值将是一个空字符串，并且此 FormControl 将是必需的。 lastName 只是一个空字符串，因为我们不希望对该字段进行任何验证。电子邮件更有趣，因为这个 FormControl 需要多个验证器，所以我们将它传递给一个数组。

现在，在我们的模板中实现所有这些也很容易

<form [formGroup]="form">
    <div>
        <input formControlName="email">
        <div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div>
        <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div>
    </div>
    ...

如果您不想让用户在表单有效之前提交表单：<button [disabled]="form.invalid">Save</button