通过Angular发送联系表格的电子邮件

如何解决通过Angular发送联系表格的电子邮件

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

contact.component.html
           <form
                action="https://mailthis.to/[e-mail]"
                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/[e-mail]';

  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;
        }
      )
    );
  }
}

解决方法

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