-1

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

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

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

4

1 回答 1

6

我建议在处理表单时使用 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 的 FormControls，因此在此示例中，我们声明了一个 FormGroup，其中包含三个 FormControl，分别称为 name、lastName 和 email。

这些 FormControls 的值用于初始化，它可以是该 FormControl 的实际值，也可以是一个数组，其中第一个元素将是该 FormControl 的值，第二个元素将是 aValidatorFn或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

于 2017-10-15T23:43:15.617 回答