我必须在我的应用程序中实现表单验证 . 我正在使用角度4.我的应用程序中还有10个表单 . 我不知道我的问题是否有效 . 我真的很困惑这个实现 .
我的问题:我需要在表单字段中添加验证,包括强制和验证,如电子邮件,电话号码等 . 如果用户输入表单,用户知道某些字段,用户可能不知道需要填写其他字段 . 但是需要保存有效字段并需要在表单中显示错误消息 .
我如何在前端实现我使用Angular 4和后端与nodejs
我建议在使用表单时使用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 's FormControls, so in this example, we'重新声明一个FormGroup,其中包含三个FormControl,称为name,lastName和email .
FormGroup
FormBuilder
group
这些FormControls的值用于初始化,它可以是FormControl的实际值,也可以是第一个元素将是FormControl值的数组,第二个元素是 ValidatorFn 或 ValidatorFn 数组 .
ValidatorFn
正如您所看到的,我们将FormControl这样定义为: name: ['', Validators.required] 这意味着初始值将是一个空字符串,并且将需要此FormControl . lastName只是一个空字符串,因为我们不希望对该字段进行任何验证 . 电子邮件更有趣,因为这个FormControl需要多个验证器,所以我们传递一个数组 .
name: ['', Validators.required]
现在,在我们的模板中实现所有这些也非常简单
<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> ...
如果你有't want to allow the user to be able to submit the form until it'的有效期: <button [disabled]="form.invalid">Save</button
<button [disabled]="form.invalid">Save</button
1 回答
我建议在使用表单时使用ReactiveFormsModule . 如果您不熟悉它,那么请查看文档,但它不应该是一个很大的问题,因为它非常简单 .
所以基本上这里发生的是我们在使用Reactive Forms时需要一个
FormGroup
实例 . 我们使用FormBuilder
类并调用它的group
方法,该方法接受我们想要创建的形式的对象并返回FormGroup
实例 . 我们传递的对象的每个属性将被称为FormGroup 's FormControls, so in this example, we'重新声明一个FormGroup,其中包含三个FormControl,称为name,lastName和email .这些FormControls的值用于初始化,它可以是FormControl的实际值,也可以是第一个元素将是FormControl值的数组,第二个元素是
ValidatorFn
或ValidatorFn
数组 .正如您所看到的,我们将FormControl这样定义为:
name: ['', Validators.required]
这意味着初始值将是一个空字符串,并且将需要此FormControl . lastName只是一个空字符串,因为我们不希望对该字段进行任何验证 . 电子邮件更有趣,因为这个FormControl需要多个验证器,所以我们传递一个数组 .现在,在我们的模板中实现所有这些也非常简单
如果你有't want to allow the user to be able to submit the form until it'的有效期:
<button [disabled]="form.invalid">Save</button