javascript - 带有mailcheck.js的Angular5 react 形式

以下是表单的HTML代码

<div class="form-group">
                <label for="email">Email</label>

     <input type="email" class="form-control"
     (blur)="suggestEmail(signupForm.controls['userData'].controls.email.value)"
     id="email" formControlName="email">


     <span class="help-block" *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched">
      please enter a valid email id
     </span>
  </div>

下面是ts代码

constructor(private fb: FormBuilder) {
    this.signupForm = this.fb.group({
      userData: this.fb.group({
        email: [null, [Validators.required, Validators.email]]
      })
    });
  }

  ngOnInit() {
  }

  suggestEmail(email) {
    Mailcheck.run({
      email: email,
      domains: ['gmail.com', 'aol.com', 'hotmail.com', 'yahoo.com', 'rediffmail.com', 'edu', 'msn.com',],
      secondLevelDomains: ['domain', 'hotmail'],
      topLevelDomains: ["com", "net", "org", "info"],
      suggested: function (suggestion) {
        console.log(suggestion);
        if (suggestion) {
          alert(suggestion.full);

         console.log(suggestion.full + "dkdjdekjekde")
        }
      },
      empty: function () {
      }
    });

  }

现在，如果suggestions.full的值被调用，它将发出警报。但是我试图在html端显示suggestions.full，如错误警告。

以下是我的stackblitz的链接
stackblitz

最佳答案

为避免在Mailcheck.run this回调中访问suggested的潜在问题，您可以保存Mailcheck.run的结果，进行检查，并在适当的情况下在表单字段中设置错误。

let check = Mailcheck.run({
   email: email,

   ... other stuff ...

   suggested: (suggestion) => {
     return suggestion;
   },
   empty: () => {
     return false; // or however you want to handle it...
   }

if (check && check.full) {
  this.suggestedEmail = check.full;
  this.signupForm.get('userData.email').setErrors({ 'has_suggestion': true })
}

// then in your template (using a getter)
<span class="help-block"
      *ngIf="f.invalid && f.touched && f.errors?.has_suggestion">
  Suggestion: {{suggestedEmail}}
</span>

请找到此stackblitz-希望对您有所帮助！