VM Clarity - невозможно использовать пользовательский валидатор с clr-control-error - PullRequest
Новая
       5

VM Clarity - невозможно использовать пользовательский валидатор с clr-control-error

0 голосов
/ 27 декабря 2018

Как я могу отобразить сообщение об ошибке из пользовательского валидатора, используя clr-control-error?У меня есть собственный валидатор для подтверждения соответствия пароля.Другие валидаторы, как требуется, minlength и maxlength работают хорошо.Я использую последнюю версию ясности.

signup.ts 

  ngOnInit() {
    this.createSignUpForm();
  }

  createSignUpForm() {
    this.signUpForm = this.fb.group({
      password: ['', [
        Validators.required,
        Validators.minLength(4),
        Validators.maxLength(12)
      ]],
      confirmPassword: ['', Validators.required]
    }, { validator: this.passwordMatchValidator });
  }

  passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('confirmPassword').value ? null 
     : {'mismatch' : true };
  }

signup.html 

        <clr-password-container>
            <label>Password</label>
            <input clrPassword formControlName="password"  />
            <clr-control-error *clrIfError="'required'">This password is required!</clr-control-error>
            <clr-control-error *clrIfError="'minlength'">It must be at least 4 characters!</clr-control-error>
            <clr-control-error *clrIfError="'maxlength'">It must be less than 12 characters!</clr-control-error>
        </clr-password-container>
        <clr-password-container>
           <label> Confirm Password</label>
           <input clrPassword formControlName="confirmPassword"/>
           <clr-control-error *clrIfError="'required'">Confirm Password is required!</clr-control-error>
           <clr-control-error *clrIfError="'mismatch'">Password Confirmation must match password</clr-control-error>
        </clr-password-container>

1 Ответ

0 голосов
/ 02 января 2019

Вы помещаете валидатор на уровень формы, а не на уровень элемента управления формы, что означает, что он никогда не сработает для этого элемента управления.Я реорганизовал ваш пример во что-то, что работает так, как вы хотите, с помощью пользовательского валидатора в элементе управления verifyPassword.

https://stackblitz.com/edit/clarity-password-confirm-validator?file=src/app/app.component.html

...