CODEWITHSUNDEEP
javascriptangulartypescript
Sahil Kkr
Sahil Kkr

Reputation: 195

Angular5 reactive forms with mailcheck.js

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

Upvotes: 0

Views: 163

Answers (2)

Nathan Beck
Nathan Beck

Reputation: 1191

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!

Upvotes: 1

Theophilus Omoregbee
Theophilus Omoregbee

Reputation: 2503

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

Upvotes: 0

Related Questions