Question

我必须在我的应用程序中实现表单验证。我正在使用角度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]]
     });
 }

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

这些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

Angular 4表单验证和错误消息

1 个答案: