因此,我尝试将formspree联系表单集成到我的angular5网站中,并遇到了一些问题。在localhost上测试时它工作正常,电子邮件是通过意图来实现的。但是,当我将我的网站部署到firebase托管时,表单无效。检查firebase站点上的控制台,看起来表单没有问题,响应总是RestController > Service > Repository
但是没有收到确认电子邮件。
以下是代码:
email.component.ts
{success: "confirmation email sent"}
email.component.html
export class EmailComponent implements OnInit {
form: FormGroup;
submitted: boolean;
success: boolean;
emailPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$';
subjectPrefix: string;
constructor(private http: Http, private route: ActivatedRoute, private location: Location) {}
ngOnInit() {
this.createForm();
this.submitted = false;
this.success = false;
this.subjectPrefix = 'WEBSITE CONTACT: ';
this.route.queryParams
.filter(params => params.success)
.subscribe(params => {
console.log(params);
this.success = params.success;
console.log(this.success);
});
}
createForm() {
this.form = new FormGroup({
name: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.required, Validators.pattern(this.emailPattern)]),
subject: new FormControl(null, Validators.required),
message: new FormControl(null, Validators.required)
}, {
updateOn: 'blur'
});
}
onSubmit() {
this.submitted = true;
if (this.form.valid) {
this.http
.post('https://formspree.io/your@email.com', {
name: this.form.value.name,
_subject: `${this.subjectPrefix}${this.form.value.subject}`,
email: this.form.value.email,
message: this.form.value.message
})
.map(res => console.log(res.json()))
.subscribe(
success => console.log('success'),
error => console.log('error')
);
}
}
}