Повторная проверка угловых элементов управления после получения ошибок http в onsubmit - PullRequest
0 голосов
/ 13 мая 2019

У меня есть угловая 7 реактивная форма с использованием контроля заправки. Когда я отправляю запрос на регистрацию, пользовательский менеджер API возвращает ошибки, такие как «DuplicateUserName» или «DuplicateEmail». У меня установлены проверки на элементах управления формой, которые работают очень хорошо.

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

Вот тут регистрация.component.ts:

     ngOnInit() {
        this.showModalPopup = false;

        this.email = new FormControl('', [Validators.required, Validators.email/*, this.emailErrorValidator(this.email)*/]);
        this.role = new FormControl('', [Validators.required]);
        this.username = new FormControl('', [Validators.required, Validators.minLength(3)]);
        this.password = new FormControl('', [Validators.required, Validators.maxLength(25), Validators.minLength(6)]);
        this.cpassword = new FormControl('', [Validators.required, this.mustMatch(this.password)]);

  this.errorList = [];

        this.registerForm = this.fb.group(
          {
            'email': this.email,
            'role': this.role,
            'username': this.username,
            'password': this.password,
            'cpassword': this.cpassword

          });
      }

      onSubmit() {
        this.submitted = true;

        this.regUserNameError = false;
        this.regEmailError = false;
        this.registrationErrorMessages = [];

        if (this.registerForm.invalid) {
          return;
        }

        let userDetails = this.registerForm.value;

        this.acct.register(userDetails.username, userDetails.password, userDetails.email)
          .subscribe(result => {
            console.log(result);
            this.registrationErrorMessages[0] = "Your Registration Was Successful - please check your email for an email from us and click the link to verify your email address.";
            this.errorList = [];
          },
            error => {
              var i = 0;
              throwError(this.errorHandler(error));
            },
            () => {
              this.handleComplete()
              {
                console.log(this.registrationErrorMessages);
              };
            }
          );
      }

      errorHandler(error: any): void {
        console.log(error)
        var i = -1;
        for (var err of error.error.errors) {
          i++;
          this.registrationErrorMessages.push(String.fromCharCode(149) + " " + err.description);

        }

        if (this.registrationErrorMessages.length > 0) {
          this.showModalPopup = true;
        }
      }

В моем тесте я зарегистрировался со своей информацией, а затем снова зарегистрировался, используя ту же информацию. Он возвращает «DuplicateUserName» и «DuplicateEmail» в качестве ошибок. Модальное всплывающее окно отображает ошибки просто отлично. Как я могу показать имя пользователя и сообщения об ошибках управления электронной почтой? Я пробовал следующее в обработчике ошибок:

errorHandler(error: any): void {
    console.log(error)
    var i = -1;
    for (var err of error.error.errors) {
      i++;
      this.registrationErrorMessages.push(String.fromCharCode(149) + " " + err.description);
      if (err.code == "InvalidUserName" || err.code == "DuplicateUserName") {
         this.registerForm.controls.userName.setValue(null);
      }
      if (err.code == "InvalidEmail" || err.code == "DuplicateEmail") {
        this.registerForm.controls.email.setValue(null)
      }
    }

    if (this.registrationErrorMessages.length > 0) {
      this.showModalPopup = true;
    }

Попытка установить значения, подобные этим, выдает ошибку «невозможно задать значение для неопределенного», хотя отладчик показывает мне форму и все доступные элементы управления. Любые предложения о том, как этого добиться?

1 Ответ

0 голосов
/ 14 мая 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...