javascript - Angular5 响应式(Reactive)表单与 mailcheck.js

Question

下面是表单的 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

Answer 1

为了避免在 Mailcheck.run suggested 回调中访问 this 时出现潜在问题，您可以保存 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 ——希望有帮助!