在 onsubmit 中收到 http 错误后重新验证 Angular 控件

Question

我有一个 angular 7 反应形式，使用启动控制。当我提交注册请求时，api usermanager returns 错误如 "DuplicateUserName" 或 "DuplicateEmail"。我在表单控件上设置了验证，效果很好。

当我收到无法通过表单控件验证的错误时，我会弹出一个显示错误的显示，但我想显示验证错误以便控件显示错误消息。

这是registration.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;
        }
      }

在我的测试中，我使用我的信息注册，然后使用相同的信息再次注册。它 returns "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;
    }

尝试像这样设置值，给我一个错误 "cant setvalue on undefined"，即使调试器向我显示了可用的表单和所有控件。关于如何实现这一点有什么建议吗？

Answer 1

好吧，在痛哭流涕和咬牙切齿之后，我决定只调用 api 并获取已用用户名和电子邮件的列表，然后再次根据列表构建自定义验证器。看起来效果不错。

在 onsubmit 中收到 http 错误后重新验证 Angular 控件

Revalidating Angular controls after receiving http errors in onsubmit

angular-reactive-forms

angular7