Angular 4 表单验证和错误消息

Question

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

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

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

Answer 1

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

form: FormGroup;

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

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

这些 FormControl 的值用于初始化，它可以是该 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