使用 Angular 发送联系表格的电子邮件

Question

我的 Angular 项目中有一个联系表，我正在尝试使用 https://mailthis.to/ 发送电子邮件。我的所有输入数据都正常工作，因为它显示在控制台中 - 但是，mailthis.to 仍然无法工作 - 我在 mailthis.to 的登录中没有收到任何电子邮件或任何提交。

contact.component.html
           <form
                action="https://mailthis.to/my_email@yahoo.com"
                method="POST"
                encType="multipart/form-data"
                novalidate
                class="needs-validation"
                (ngSubmit)="processForm()"
                *ngIf="!submitted"
                #form="ngForm"
              >
                <div
                  class="field"
                  [ngClass]="{ 'has-error': name.invalid && name.touched }"
                >
                  <label>First and Last Name:</label>
                  <input
                    type="text"
                    name="Name"
                    class="input"
                    placeholder="Full Name"
                    [(ngModel)]="user.Name"
                    #name="ngModel"
                    required
                  />
                  <span class="help-block" *ngIf="name.invalid && name.touched"
                    >Name is required.</span
                  >
                </div>

                <div
                  class="field"
                  [ngClass]="{ 'has-error': email.invalid && email.touched }"
                >
                  <label>Your Email:</label>
                  <input
                    type="email"
                    name="Email"
                    class="input"
                    [(ngModel)]="user.Email"
                    #email="ngModel"
                    required
                  />
                  <span
                    class="help-block"
                    *ngIf="email.invalid && email.touched"
                    >Email is required.</span
                  >
                </div>

                <button type="submit" class="button" [disabled]="form.invalid">
                  <input type="submit"  [disabled]="form.invalid"/>
                </button>
              </form>

那么这里是我的contact.component.ts

export class User {
  Name: string;
  Email: string;
}

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
})
export class ContactComponent implements OnInit {
  user: User;
  submitted: boolean = false; // checks if the form has been submitted

  constructor(private contact: ConnectionService) {}

  ngOnInit() {
    this.user = {
      Name: '',
      Email: ''
   };

processForm() {
    this.contact.PostMessage(this.user);
    console.log(this.user);
    this.submitted = true;
  }
}

最后，这是我的connection.service.ts

@Injectable({
  providedIn: 'root',
})
export class ConnectionService {
  private api = 'https://mailthis.to/my_email@yahoo.com';

  constructor(private http: HttpClient) {}

  PostMessage(input: any) {
    return this.http.post(this.api, input, { responseType: 'text' }).pipe(
      map(
        (response) => {
          if (response) {
            return response;
          }
        },
        (error: any) => {
          return error;
        }
      )
    );
  }
}

Answer 1

如果您使用 api，那么最好使用后端代码而不是前端代码发送邮件