时间戳

首页 > 解决方案 > 如何应用自定义表单验证 [Angular]

angular - 如何应用自定义表单验证 [Angular]

问题描述

我想学习表单验证。所以我创建了一个简单的注册，其中包含非常基本的详细信息，例如名字、姓氏、电子邮件、通行证和确认通行证。验证也很简单，只有两个标准：

  1. 最小长度(4)
  2. 模式（'[A-Za-z]{4,15}'）

我有一个提交按钮，它最初是禁用的，但如果所有字段都有效，它就会激活。我的问题是，即使在所有正确的值之后，我的提交按钮仍然被禁用。代码有点长。

注册组件.ts

import { Component, OnInit } from '@angular/core';
...

@Component({
  ...
})
export class RegisterComponent implements OnInit {

  registerUserData ={
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    userid: ""
  };

  form: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.form  = this.fb.group({
      firstname:['', [Validators.required,Validators.minLength(4), Validators.pattern('[A-Za-z]{4,15}')]],
      lastname:['', [Validators...
    });

    this.form.controls.password.valueChanges
    .subscribe(
      x => this.form.controls.cnfpass.updateValueAndValidity()
    )
  }

  ngOnInit() {
  }

  registerUser() {
    if (!this.form.valid) return;
    this.form.markAsTouched();
    this.registerUserData.firstName=this.form.value.firstname;    
    ...
    console.log(this.registerUserData);
  }
}

HTML 甚至更长。所以我创建了一个 Stackblitz（我认为这对你来说会更方便）。这是链接：Stackblitz

请纠正我的错误。

PS：控制台没有错误。一切看起来都很干净。

标签： angular

解决方案

在第 28 行，你把你的结束括号放在了不好的地方

password: ['', [Validators.required, Validators.minLength(4)], Validators.pattern('[A-Za-z0-9]{4,25}')],
                                                         
                                                         /\/\/\

像这样它会运作良好

password: ['', [Validators.required, Validators.minLength(4), Validators.pattern('[A-Za-z0-9]{4,25}')]],

推荐阅读