node.js - 提交表单时无法显示flsha-messages
问题描述
我正在为我的网站使用 nodejs、Express 和 angular 6,并且我刚刚使用 nodemailer 创建了一个联系表单。现在,我想在提交表单后使用 Flash 消息显示在联系页面上,例如
Data succesfully submitted ! Thanks'
反之亦然
这是表格
<h1>Contact us</h1>
<flash-messages></flash-messages>
<form [formGroup]="angForm" method="POST" novalidate>
<div class="message">
<h3> Write to us </h3>
</div>
<div class="form__top">
<div class="form__left">
<div class="form__group">
<input class="form__input form__input--name" type="text" formControlName="name" placeholder="name" #name>
</div>
<div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['name'].errors.required">
Name is required.
</div>
</div>
<div class="form__group">
<input class="form__input form__input--email" type="email" formControlName="email" placeholder="email" #email>
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['message'].errors.required">
message is required.
</div>
</div>
</div>
<div class="form__right">
<div class="form__group">
<textarea class="form__input form__input--textarea" placeholder="Message" formControlName="message" #message
rows="3"></textarea>
</div>
<div *ngIf="angForm.controls['message'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['message'].errors.required">
message is required.
</div>
</div>
</div>
</div>
<div class="form__down">
<div class="form__group">
<button (click)="sendMail(name.value, email.value, message.value)" [disabled]="angForm.pristine || angForm.invalid" class="form__input form__input--submit" name="submit" type="submit" value="SEND MESSAGE">SEND MESSAGE
</button>
</div>
</div>
</form>
这是 components.ts
import { Component, OnInit } from '@angular/core';
import { ContactService } from '../../contact.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
angForm: FormGroup;
constructor(
private flashMessages: FlashMessagesService,
private fb: FormBuilder,
private contactService: ContactService) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
message: ['', Validators.required],
});
}
sendMail(name, email, message) {
this.contactService.sendEmail(name, email, message).subscribe(() => {
this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
}, error => {
this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
});
}
ngOnInit() {
}
}
这是contact.js(节点邮件设置)
const express = require('express');
const router = express.Router();
const request = require('request');
const nodemailer = require('nodemailer');
router.post('/send', (req, res) => {
const outputData = `
<p>You have a new contact request</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
let transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: 'myEmail',
pass: 'pass'
},
tls: {
rejectUnauthorized: false
}
});
let HelperOptions = {
from: '"name" <myEmail',
to: 'myEmail',
subject: 'Majeni Contact Request',
text: 'Hello',
html: outputData
};
transporter.sendMail(HelperOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log("The message was sent!");
console.log(info);
});
});
module.exports = router;
现在我可以发送消息,但我希望在提交数据时显示成功消息。不幸的是,没有显示任何内容,但提交了数据。
我在这里做错了什么?
解决方案
代码看起来完全没问题,它应该可以按预期工作,无论如何,如果您使用带有 node.js 的任何 api,您可以设置超时以发送响应,如下所示,
setTimeout((function() {res.send("ok")}), 2000);
推荐阅读
- swift - 如何在 Swift 的子类中调用委托的函数?
- javascript - 替换数组中多个字符串上的单词
- matlab - 如何分配给由向量索引的一些向量元素?
- rxjs - 每当几个可观察对象之一发出一个值时发出一个值,即使不是所有的都还没有?
- ssl - 由于 Outlook.office365.com 上的对等重置导致 TLS 1.2 握手失败
- javascript - 选择菜单项时保持悬停颜色变化
- acumatica - Acumatica 稍后更新批次/序列号详细信息
- python - Python 字符串/参数操作
- python - CircleCI 没有拾取运行步骤中定义的环境变量?
- c# - 用于动态调用的错误泛型重载