Как устранить ошибку, с которой я сталкиваюсь, используя пользовательский синтаксис Validator? - PullRequest
Новая
       19

Как устранить ошибку, с которой я сталкиваюсь, используя пользовательский синтаксис Validator?

1 голос
/ 04 апреля 2019

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

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

Импорт 

import { FormControl, Validators, FormGroup, ValidatorFn, AbstractControl } from "@angular/forms";
import { Component } from "@angular/core";
import { MatButton } from "@angular/material";

FormGroup 

registerForm = new FormGroup({
    first: new FormControl(null, [
      Validators.required,
    ]),
    last: new FormControl(null, [
      Validators.required,
    ]),
    id: new FormControl(null, [
      Validators.required,
    ]),
    email: new FormControl(null, [
      Validators.required,
      Validators.email
    ]),
    newpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
    confirmpass: new FormControl(null, [
      Validators.required,
      this.ageRangeValidator
    ]),
  }, {this.matchingPasswords} );

CustomValidator 

matchingPasswords(c: AbstractControl): {[key: string]: any} {
    let password = c.get(['passwords']);
    let confirmPassword = c.get(['confirmpwd']);

    if (password.value !== confirmPassword.value) {
      return { mismatchedPasswords: true };
    }
    return null;
  }

Когда я пытаюсь запустить этот код, я сталкиваюсь со следующей ошибкой:

Аргумент типа '{this: any;} 'нельзя назначить параметру типа' ValidatorFn |ValidatorFn [] |AbstractControlOptions.Объектный литерал может указывать только известные свойства, и «this» не существует в типе «ValidatorFn |ValidatorFn [] |AbstractControlOptions'.ts (2345)

Это для старшего школьного проекта.

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Вы возвращаете null или ValidatorError не только объект с любым свойством. Измените тип возвращаемого свойства вашего метода matchPasswords: 

matchingPasswords(c: AbstractControl): ValidationErrors | null {
    let password = c.get(['passwords']);
    let confirmPassword = c.get(['confirmpwd']);

    if (password.value !== confirmPassword.value) {
      return { mismatchedPasswords: true };
    }
    return null;
  }

Для html-справки я бы проверил, были ли в элементе управления какие-либо ошибки, и проверил, связано ли это с тем, что пароль не совпадает, вместо того, чтобы требовать: 

<div *ngIf="registerForm.get('confirmpwd').errors && registerForm.get('confirmpwd').errors['mismatchedPasswords']">
   Passwords do not match
</div>
0 голосов
/ 04 апреля 2019

Похоже, проблема связана со звонком на 

this.matchingPasswords

Валидатор должен быть статической функцией. Поэтому не используйте ключевое слово this . Вы можете определить matchPasswords как чистую функцию javascript или определить ее как статическую функцию в классе машинописного текста (рекомендуемый подход). Затем включите класс в свой модуль и передайте функцию как ClassName.matchingPasswords;

...