首页 文章

Angular 4表单验证和错误消息

提问于
浏览
-2

我必须在我的应用程序中实现表单验证 . 我正在使用角度4.我的应用程序中还有10个表单 . 我不知道我的问题是否有效 . 我真的很困惑这个实现 .

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

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

1 回答

  • 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 's FormControls, so in this example, we'重新声明一个FormGroup,其中包含三个FormControl,称为name,lastName和email .

    这些FormControls的值用于初始化,它可以是FormControl的实际值,也可以是第一个元素将是FormControl值的数组,第二个元素是 ValidatorFnValidatorFn 数组 .

    正如您所看到的,我们将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>
        ...
    

    如果你有't want to allow the user to be able to submit the form until it'的有效期: <button [disabled]="form.invalid">Save</button

相关问题