小编Pou*_*tte的帖子

使用mat-error显示自定义验证器错误

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

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

用户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)]],
}
Run Code Online (Sandbox Code Playgroud)

我的兴趣是匹配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;
    }
}
Run Code Online (Sandbox Code Playgroud)

和HTML. …

custom-validators angular-material2 angular

16
推荐指数
1
解决办法
3万
查看次数