相关疑难解决方法(0)

我来找你谈论角材料的问题.事实上,我认为这是一个问题,但我更喜欢先找一个误解.

关于我的问题的第一件事是上下文,我尝试做一个包含两个输入的简单表单:密码及其'确认.

用户form.component.ts

this.newUserForm = this.fb.group({
  type: ['', Validators.required],
  firstname: ['', Validators.required],
  lastname: ['', Validators.required],
  login: ['', Validators.required],
  matchingPasswordsForm: this.fb.group(
    {
      password1: ['', Validators.required],
      password2: ['', Validators.required],
    },
    {
      validator: MatchingPasswordValidator.validate,
    },
  ),
  mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
  cbaNumber: [
    '411000000',
    [Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
  ],
  phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}

我的兴趣是匹配PasswordsForm FormGroup.你可以在上面看到验证器.

验证器在这里:

匹配-password.validator.ts

export class MatchingPasswordValidator {
    constructor() {}

    static validate(c: FormGroup): ValidationErrors | null {
        if (c.get('password2').value !== c.get('password1').value) {
            return { matchingPassword: true};
        }
        return null;
    }
}

和HTML. …

我是HTML的新手,任何人都可以帮我验证一个只有'+'的电话号码,数字值和电话号码不超过13个号码,并用'@'和'.'验证电子邮件,我不想使用javascript

我已经尝试找到一个完整的模式列表,用于通过各种类型的HTML5表单验证验证输入,特别url是email,tel等等,但我找不到任何模式.目前,这些输入验证的内置版本远非完美(tel甚至不检查您输入的内容是否是电话号码).所以我想知道,我可以使用哪些模式来验证用户是否在输入中输入了正确的格式？

以下是一些默认验证允许不允许输入的情况示例:

type="email"

此字段允许在@之后具有不正确域的电子邮件,并且它允许地址以短划线或句点开始或结束,这也是不允许的.所以,.example-@x是允许的.

type="url"

此输入基本上允许以http://(Chrome)开头的任何输入,后跟除了一些特殊字符之外的任何内容,例如在URL(\,@,#,〜等)中具有功能的特殊字符.在FF中,所有检查的是它是否以http:,除了之后的任何其他内容:(即使只是http:在FF中允许).IE与FF相同,只是它不允许http::.

例如:http://.允许所有三个.等等http://,.

type="tel"

目前在任何主流浏览器中都没有针对电话号码的内置验证(type="text"除了告诉移动浏览器要显示哪种类型的键盘之外,其功能与100%相同).

因此,由于浏览器在每种情况下都没有显示一致的行为,并且由于它们显示的行为是非常基本的,有很多误报,我可以做些什么来验证我的HTML表单(仍然使用HTML5输入验证)？

PS:我发布这个是因为我觉得自己有一个完整的表单验证模式列表很有用,所以我认为它也可能对其他人有用(当然其他人也可以发布他们的解决方案).