使用formsubmit.co搭建Angular联系表单，自动发邮件功能失效求助

我尝试用formsubmit.co搭建“联系我”表单，但提交后无法自动发送邮件。在线站点为tantilloportfolio.web.app，以下是我的表单代码和组件代码：

表单HTML代码 #

<form (ngSubmit)="submitForm()" #contactForm="ngForm"   
 action="https://formsubmit.co/katie.m.tantillo@gmail.com" method="POST">
  <div class="field">
    <label class="label">Name</label><br>
    <input 
        type="text" 
        size="maxlength" 
        name="name" 
        class="input" 
        [(ngModel)]="name"
        #nameInput="ngModel" 
        required>

        <div class="help is-error" *ngIf="nameInput.invalid && nameInput.touched">
            <h6>Please enter your name.</h6>
        </div>
  </div>

  <div class="field">
    <label class="label">Email</label><br>
    <input 
        type="email" 
        name="email" 
        class="input" 
        [(ngModel)]="email" 
        #emailInput="ngModel"
        required
        email>

        <div class="help is-required" *ngif="emailInput.invalid && emailInput.touched">
            <h6>Please enter a valid email.</h6> 
        </div>
  </div>

  <div class="field">
    <label class="label">Your Message</label><br>
    <textarea rows="2" cols="25" name="message" name="name" class="textarea" 
  [(ngModel)]="message"></textarea>
  </div>

  <button 
    type="submit" 
    class="button"
    [disabled]="contactForm.invalid">
    <span>Send</span>
  </button>
</form>

组件TypeScript代码 #

export class ContactComponent {
  name: string="";
  email: string="";
  message: string=""

  submitForm() {
    const message = `Thanks ${this.name}! Your message has been sent to katie.m.tantillo@gmail.com. Look for a reply to ${this.email} within 24 hours.`;

    alert(message);
  }
}

问题原因分析 #

1. Angular事件阻止原生提交：同时使用Angular的(ngSubmit)事件和原生表单的action/method属性，Angular会默认阻止表单原生提交行为，导致formsubmit.co的邮件发送逻辑无法触发。
2. 重复name属性：textarea标签重复定义了name="message"和name="name"，会导致表单参数混乱，formsubmit无法正确识别消息内容。
3. 指令拼写错误：邮箱验证提示框使用了小写的*ngif，正确的Angular结构指令应为大写的*ngIf，会导致验证提示无法正常显示。

解决方案 #

方案1：移除Angular的ngSubmit，使用原生表单提交

直接去掉表单上的(ngSubmit)="submitForm()"，让表单按原生方式提交，同时保留Angular表单验证逻辑：

• 修改表单标签：

<form #contactForm="ngForm"   
 action="https://formsubmit.co/katie.m.tantillo@gmail.com" method="POST">

• 修正textarea重复name属性：

<textarea rows="2" cols="25" name="message" class="textarea" [(ngModel)]="message"></textarea>

• 修正邮箱验证指令拼写：

<div class="help is-required" *ngIf="emailInput.invalid && emailInput.touched">
    <h6>Please enter a valid email.</h6> 
</div>

方案2：保留ngSubmit，手动调用formsubmit API提交

如果想要保留alert提示，可在submitForm方法中手动发送POST请求：
首先在组件中引入HttpClient（需在模块中导入HttpClientModule）：

import { HttpClient } from '@angular/common/http';

export class ContactComponent {
  name: string="";
  email: string="";
  message: string=""

  constructor(private http: HttpClient) {}

  submitForm() {
    const formData = new FormData();
    formData.append('name', this.name);
    formData.append('email', this.email);
    formData.append('message', this.message);

    this.http.post('https://formsubmit.co/katie.m.tantillo@gmail.com', formData)
      .subscribe({
        next: () => {
          alert(`Thanks ${this.name}! Your message has been sent to katie.m.tantillo@gmail.com. Look for a reply to ${this.email} within 24 hours.`);
          // 重置表单内容
          this.name = '';
          this.email = '';
          this.message = '';
        },
        error: () => {
          alert('Oops, something went wrong. Please try again later.');
        }
      });
  }
}

同时需修正textarea的重复name属性和*ngif拼写错误，可去掉表单上的action和method属性。

内容的提问来源于stack exchange，提问作者Kathleen Tantillo