如何通过firebase将表单数据直接发送到特定的电子邮件

时间:2017-08-09 01:41:47

标签: javascript html angular firebase angular2-forms

我使用Angular 4和firebase作为我的后端。我想知道如何将此表格的详细信息直接发送到学校所有者的电子邮件中。假设我想向它发送一个在firebase中注册的特定电子邮件。我很擅长使用Firebase。

<md-card>

  <h1 class=" mat-elevation-z12" style="text-align:center; background-color:crimson ;color:white; padding:10px;">Get in Touch With Us</h1>
  <md-tab-group md-stretch-tabs>
    <md-tab label="Phone">
      <div class="text-center" style="color:crimson">
        <h3 style="color:black">Give us a call</h3>
        <p class="phone mat-body-2" >
          <md-icon>phone</md-icon>
          <strong> +91 7017514186</strong>
        </p>
        <p class="phone mat-body-2">
          <md-icon>phone</md-icon>
          <strong> +91 7417690098</strong>
        </p>
        <p class="phone mat-body-2">
          <md-icon>phone</md-icon>
          <strong> +91 8077530850</strong>
        </p>
        <p style="color: black">
          <md-card-footer>Open Monday to Saturday, 7am - 2pm</md-card-footer>
        </p>
      </div>
    </md-tab>
  <md-tab-group>

  </md-tab-group>
    <md-tab label="Email" class="email-tab">

      <div class="text-center">
        <h3>Send us a message!</h3>
      </div>

      <form #contactForm="ngForm" (ngSubmit)="onContactFormSubmit(contactForm.value)">

        <md-select name="subject" id="subject-select" placeholder="Subject" ngModel>
          <md-option *ngFor="let reason of contactReasons" [value]="reason.value">
            {{ reason.viewValue }}
          </md-option>
        </md-select>

        <md-input-container>
          <input mdInput placeholder="Email" name="email" type="email" ngModel>
        </md-input-container>
        <md-input-container>
          <input mdInput placeholder="Phone" name="phone" type="phone" ngModel>
        </md-input-container>

        <md-input-container>
          <textarea
            mdInput
            name="message"
            placeholder="Write your message"
            ngModel>
          </textarea>
        </md-input-container>

        <div class="submit-area">
          <md-checkbox name="optIn" ngModel>
              Sign me up for the mailing list!
          </md-checkbox>
          <div class="submit-button-area">

            <button
              md-raised-button
              type="submit"
              name="submit"
              [disabled]="!contactForm.value.message">
                Submit
            </button>

            <button
              md-raised-button
              type="button"
              (click)="onContactFormClear()">
                Clear
            </button>

          </div>
        </div>

        <md-progress-bar mode="indeterminate" *ngIf="contactForm.submitting"></md-progress-bar>

      </form>      
    </md-tab>
  </md-tab-group>

</md-card>

export class ContactComponent implements OnInit {

contactReasons: Array<any> = [
    { value: 'admission', viewValue: 'Admission' },
    { value: 'complaint', viewValue: 'Complaint' },
    { value: 'general-question', viewValue: 'General Question' },

  ];
  constructor() { }

  ngOnInit() {
  }

  onContactFormSubmit(formData) {

    console.log();

  }

  onContactFormClear() {
  }

我在控制台上获得了正确的日志值,即json格式的表单值。

0 个答案:

没有答案