私はAngular 2アプリをfirebaseでホストしています。お問い合わせフォームをメールで送信したいのですが、私のソリューションではNodejsを使用するのが理想的ですが、仕事を成し遂げるものなら何でも使用するつもりです。以下は私のアプリの内訳です。
これが私のフォームです:
<!-- contact-form.component.html -->
<form [formGroup]="formService.contactForm" (ngSubmit)="formService.onSubmitForm()">
<input type="text" formControlName="userFirstName">
<label>First Name</label>
<input type="text" formControlName="userLastName">
<label>Last Name</label>
<button type="submit">SUBMIT</button>
</form>
これが私の連絡フォームコンポーネントです:
// contact-form.component.ts
import { Component } from '@angular/core';
import { ContactFormService } from './contact-form.service';
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-content.component.css'],
providers: [ContactFormService]
})
export class ContactFormComponent {
constructor(private formService: ContactFormService) {
formService.buildForm();
}
}
これが私のお問い合わせフォームサービスです。
// contact-form.service.ts
import { Injectable } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Injectable()
export class ContactFormService {
constructor(public formBuilder: FormBuilder) { }
contactForm: FormGroup;
formSubmitted: boolean = false;
buildForm() {
this.contactForm = this.formBuilder.group({
userFirstName: this.formBuilder.control(null, Validators.required),
userLastName: this.formBuilder.control(null, Validators.required)
});
}
onSubmitForm() {
console.log(this.contactForm.value);
this.formSubmitted = true;
this.contactForm.reset();
}
}
送信ボタンをクリックすると、フォームデータがコンソールに正常に表示されます。
SendGridとNodejsを使用して、コマンドプロンプトからメールを正常に送信できます。
例:sendmail.js
var Sendgrid = require('sendgrid')(
process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);
var request = Sendgrid.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: {
personalizations: [{
to: [{ email: '[email protected]' }],
subject: 'Sendgrid test email from Node.js'
}],
from: { email: '[email protected]' },
content: [{
type: 'text/plain',
value: 'Hello Joe! Can you hear me Joe?.'
}]
}
});
Sendgrid.API(request, function (error, response) {
if (error) {
console.log('Mail not sent; see error message below.');
} else {
console.log('Mail sent successfully!');
}
console.log(response);
});
コマンドプロンプトに次のように入力すると、電子メールが正常に送信されます。
node sendmail
ただし、送信したフォームデータをsendmail.jsにリンクする方法がわかりません。また、送信ボタンをクリックしてsendmail.jsのコードをアクティブにする方法もわかりません。
どんな助けでも大歓迎です。御時間ありがとうございます!
sendmail.jsをRESTサービスとして書き換えようとします。次に例を示します。
const Sendgrid = require('sendgrid')(
process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.post('/send-mail', function (req, res) {
// PUT your send mail logic here, req.body should have your fsubmitted form's values
sendMail(req.body);
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.send('SEND MAIL');
})
app.listen(3000, function () {
console.log('LISTENING on port 3000');
})
function sendMail(formData) {
let request = Sendgrid.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: {
personalizations: [{
to: [{ email: '[email protected]' }],
subject: 'Sendgrid test email from Node.js'
}],
from: { email: '[email protected]' },
content: [{
type: 'text/plain',
value: `Hello ${formData.userFirstName} ${formData.userLastName}! Can you hear me ${formData.userFirstName}?.`
}]
}
});
Sendgrid.API(request, function (error, response) {
if (error) {
console.log('Mail not sent; see error message below.');
} else {
console.log('Mail sent successfully!');
}
console.log(response);
});
}
メールの本文内のフォームデータを使用したことに注意してください
その後、あなたの送信関数で角度で、単に実行します
http.post('http://localhost:3000/send-mail', this.contactForm.value);
編集:Firebaseでサービスを提供していることがわかりました。それがどのように変化するかを調査します。
Firebaseでサーバー側のコードをどのように実行しますか?
Angular 2はクライアント側です。シークレットを使用してAPI呼び出しを行う場合は、おそらくサーバー側、つまりnode.jsなどのサーバーで行う必要があります。
sendmail.js
スクリプトとして、Angular 2アプリケーションでnode.jsを使用し、/api/sendMail
Angular 2アプリケーションからXHR/AJAXリクエストを行うことができます。