Пользовательская проверка с использованием дизайна ясности не работает - PullRequest
Новая
       6

Пользовательская проверка с использованием дизайна ясности не работает

0 голосов
/ 20 февраля 2019

Я пытаюсь реализовать пользовательский валидатор с использованием дизайна ясности, который сравнивает два значения элемента управления формы и возвращает истину, если первое значение элемента управления формы больше, чем второе.Как мне это сделать?

1 Ответ

0 голосов
/ 22 февраля 2019

Приведенный пример был близок к работе, но некоторые вещи нужно изменить, чтобы заставить это работать.Убедитесь, что в вашей функции проверки группы возвращаемое сообщение об ошибке совпадает с сообщением об ошибке, определенным в шаблоне.В моем примере сообщение об ошибке passwordMissmatch.

Поскольку это средство проверки группы, clr-control-error не будет получать сообщения об ошибках группы (о которых я знаю), оно отображает только отдельные ошибки управления.Чтобы отобразить групповую ошибку, прослушайте ошибки в корневой группе форм. 

<form clrForm [formGroup]="form" (ngSubmit)="submit()">
  <clr-password-container>
    <label>Password</label>
    <input clrPassword formControlName="password" />
    <clr-control-error>Password Required</clr-control-error>
  </clr-password-container>

  <clr-password-container>
    <label>Confirm Password</label>
    <input clrPassword formControlName="confirmPassword" />
  </clr-password-container>

  <clr-alert *ngIf="form.errors?.passwordMissmatch && form.controls.confirmPassword.touched" clrAlertType="danger" [clrAlertClosable]="false">
    Passwords must match.
  </clr-alert>

  <button class="btn btn-primary">Submit</button>
</form>

form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    password: ['', [Validators.required]],
    confirmPassword: ['']
  }, { validators: this.checkPasswords });
}

checkPasswords(group: FormGroup) {
  return group.controls.password.value === group.controls.confirmPassword.value ? null : { passwordMissmatch: true };
}

Вот полностью работающий стек https://stackblitz.com/edit/clarity-oshxxw

Вы также можете создать более повторно используемый универсальныйвалидатор группы, который может сравнивать любые два входа, передавая имя элемента управления.Пример: 

...
new FormGroup({
  password: new FormControl('', [Validators.required, Validators.minLength(6)]),
  confirm: new FormControl('', Validators.required)
}, matchingInputsValidator('password', 'confirm', 'missmatch'))
...

export function matchingInputsValidator(firstKey: string, secondKey: string, errorName: string) {
  return function (group: FormGroup): ValidationErrors | undefined {
    if (group.controls[firstKey].value !== group.controls[secondKey].value) {
      return {
        [errorName]: true
      };
    }
  };
}

Более подробное объяснение можно найти здесь: https://coryrylan.com/blog/build-accessible-forms-with-angular

...