Angular5 reactive forms with mailcheck.js

Question

below is HTML code for form

<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>

Below is ts code

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 () {
      }
    });

  }

Right now, value of suggestions.full comes in alert if its being called. But I am trying to show suggestions.full in html side, like as a error warning.

Below is link to my stackblitz stackblitz

score 1 · Accepted Answer · answered Feb 01 '19 at 16:09

To avoid potential problems with access to this within the Mailcheck.run suggested callback, you could save the results of Mailcheck.run, check them and, if appropriate, set an error on your form field.

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>

Please find this stackblitz -- hope it helps!

Theophilus Omoregbee · Answer 2 · 2019-02-01T15:58:59.103

Instead of using a regular function which will be lost this scope whereas arrow function keeps track of this. Read more about the difference here https://stackoverflow.com/a/34361380/5836034

do something like this

....
suggestion: any;
....
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: (suggestion) => {
        console.log(suggestion);
        if (suggestion) {
          alert(suggestion.full);
         this.suggestion = suggestion; 
         console.log(suggestion.full + "dkdjdekjekde")
        }
      },
      empty: function () {
      }
    });
}

Observe the use of arrow function, to keep track of this scope and also, assigning the value of suggestion to your class variable via

this.suggestion = suggestion

in your template, you can now have access to suggestion like so

<div *ngIf="suggestion">{{suggestion.full}} </div>

Source: https://stackblitz.com/edit/angular-email-checker-bjcrcc

Angular5 reactive forms with mailcheck.js

2 Answers2