[英]Send email of contact form with Angular
I have a contact form in my Angular project and I am trying to use https://mailthis.to/ for my email sending.我的 Angular 项目中有一个联系表格,我正在尝试使用https://mailthis.to/发送电子邮件。 All my input data is working correctly because it shows in the console - however, the
mailthis.to
is still not working - I'm not receiving any emails or any submissions in my login at mailthis.to.我的所有输入数据都正常工作,因为它显示在控制台中 - 但是,
mailthis.to
仍然无法正常工作 - 我在 mailthis.to 登录时没有收到任何电子邮件或任何提交。
contact.component.html
<form
action="https://mailthis.to/my_email@yahoo.com"
method="POST"
encType="multipart/form-data"
novalidate
class="needs-validation"
(ngSubmit)="processForm()"
*ngIf="!submitted"
#form="ngForm"
>
<div
class="field"
[ngClass]="{ 'has-error': name.invalid && name.touched }"
>
<label>First and Last Name:</label>
<input
type="text"
name="Name"
class="input"
placeholder="Full Name"
[(ngModel)]="user.Name"
#name="ngModel"
required
/>
<span class="help-block" *ngIf="name.invalid && name.touched"
>Name is required.</span
>
</div>
<div
class="field"
[ngClass]="{ 'has-error': email.invalid && email.touched }"
>
<label>Your Email:</label>
<input
type="email"
name="Email"
class="input"
[(ngModel)]="user.Email"
#email="ngModel"
required
/>
<span
class="help-block"
*ngIf="email.invalid && email.touched"
>Email is required.</span
>
</div>
<button type="submit" class="button" [disabled]="form.invalid">
<input type="submit" [disabled]="form.invalid"/>
</button>
</form>
Then here is my contact.component.ts
然后这是我的
contact.component.ts
export class User {
Name: string;
Email: string;
}
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
})
export class ContactComponent implements OnInit {
user: User;
submitted: boolean = false; // checks if the form has been submitted
constructor(private contact: ConnectionService) {}
ngOnInit() {
this.user = {
Name: '',
Email: ''
};
processForm() {
this.contact.PostMessage(this.user);
console.log(this.user);
this.submitted = true;
}
}
And lastly, here is my connection.service.ts
最后,这是我的
connection.service.ts
@Injectable({
providedIn: 'root',
})
export class ConnectionService {
private api = 'https://mailthis.to/my_email@yahoo.com';
constructor(private http: HttpClient) {}
PostMessage(input: any) {
return this.http.post(this.api, input, { responseType: 'text' }).pipe(
map(
(response) => {
if (response) {
return response;
}
},
(error: any) => {
return error;
}
)
);
}
}
如果您使用 api,那么最好使用后端代码而不是前端代码发送邮件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.