I am facing an issue with dynamically capturing text and sending it to my email. While manually typing into TS onSendEmail, it works fine. I am using a free email hosting server, and all the required files are available in the assets folder.
HTML code
<form (ngSubmit)="onSendEmail(addEmailForm)" #addEmailForm ="ngForm">
<fieldset>
<legend>Contact us</legend>
<label>Your name</label> <br>
<input ngModel name="name" type="text" placeholder="Your name" size="20" required ><br>
<label>E-mail address</label> <br>
<input ngModel name="email" type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f0edf4f8e5f9f0d5f0edf4f8e5f9f0bbf6faf8">[email protected]</a>" size="20" required><br>
<label>Subject</label> <br>
<input ngModel name="subject" type="text" size="20"><br>
<label>Body</label> <br>
<textarea ngModel name="body" type="text" cols="40" rows="6" required></textarea><br>
<button [disabled]="addEmailForm.invalid" >Send</button>
</fieldset>
</form>
Typescript code
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
declare let Email: any;
import 'src/assets/smtp.js'; // available in assets folder
@Component({
selector: 'app-map',
templateUrl: './shops.component.html',
styleUrls: ['./shops.component.css']
})
export class ShopsComponent implements OnInit, AfterViewInit {
constructor(private http: HttpClient) { }
ngOnInit(): void { }
body: any
subject: any;
email: any;
name: any;
onSendEmail(addEmailForm: NgForm) {
Email.send({
Host : "smtp.elasticemail.com",
Username : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd6c2ded6dad2d7fbd3d4cfd6dad2d795d8d4d6">[email protected]</a>",
Password : "mypassword",
To : '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92ffebe1f7f1fdfcf6f7fff3fbfed2fafde6fff3fbfebcf1fdff">[email protected]</a>',
Name: this.name,
From : this.email, // when I write these manually the email gets sent
Subject : this.subject,
Body : this.body,
}).then(
(message: any) => alert("E-mail sent, thank you.")
);
}
}