首页 > 解决方案 > Angular 表单 onclick 提交事件以向 gmail 帐户发送电子邮件

问题描述

需要一些关于如何将角度简单的表单数据发送到电子邮件(gmail 帐户)的帮助。我已经创建了表单并能够捕获日志中的值。而且,我正在尝试通过 php 脚本在电子邮件中发送数据,但是我收到以下错误: 无法在“localhost”端口 25 连接到邮件服务器,请验证 php.ini 中的“SMTP”和“smtp_port”设置或使用 ini_set()。

我知道我需要设置 smtp 服务器,但不知道该怎么做,我对 Angular 很陌生。请协助我如何通过我的本地主机发送电子邮件以进行测试,然后当我购买域名时,需要进行哪些更改才能通过我的网站发送电子邮件?

我的表单和 php 脚本如下:

 <form [formGroup]="formdata"  class="form" (ngSubmit)="onClickSubmit()" action="send-mail.php" method="POST">
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="first_name">First Name :</mat-label>
      <input matInput  formControlName="first_name" value="">

    </mat-form-field><br>
    </div>
    <div>
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="last_name">Last Name :</mat-label>
      <input matInput formControlName="last_name"  value="">
    </mat-form-field><br>
      </div>
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="description">Description : </mat-label>
      <textarea cols = "150" matInput formControlName="desc" value=""></textarea>
    </mat-form-field><br>
      </div>
    <div>
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="email">Email Address :</mat-label>
      <input matInput placeholder="abc@xyz.com" formControlName="email"  value="">
    </mat-form-field><br>
      </div>
    <div>
    <mat-form-field class="example-full-width" appearance="outline">
      <mat-label class="label" name="phone">Contact Number :</mat-label>
      <input matInput placeholder="+91123456789" formControlName="phone"  value="">
    </mat-form-field><br>
      </div>

    <div>
 <input type="submit" class="label" value="Submit Your Query">&nbsp;
      <input (click)="setPreset()" type="submit" class="label" value="Reset" >
      </div>

</form>

<?php     
$mail_to       = 'abc.xxx@gmail.com'; 

$first_name         = 'test1';
$mail_from          = 'abc.xxx@gmail.com';
$phone              = '12345';
$description        = 'test4';

$subject       = 'Email Testing - Message from ' . $first_name;     

$body_message  = 'From: ' . $first_name . "\r\n";     
$body_message .= 'E-mail: ' . $mail_from . "\r\n";     
$body_message .= 'Phone: ' . $phone . "\r\n";     
$body_message .= 'Description: ' . $description;  

$headers       = 'From: ' . $mail_from . "\r\n";     
$headers      .= 'Reply-To: ' . $mail_from . "\r\n";     

$mail_sent     = mail($mail_to, $subject, $body_message, $headers);     

if ($mail_sent == true){ ?> <script language="javascript" type="text/javascript">         
    alert('Thank you for the message. We will contact you shortly.');     
    </script>
<?php } else { ?>     
    <script language="javascript" type="text/javascript">         
    alert('Message not sent. Please, notify the site administrator');            
    </script>     
<?php     
} 
?>

And on the php.ini i have changed this setting:

    [mail function]
    ; For Win32 only.
    ; http://php.net/smtp
    SMTP = smtp.gmail.com
    ; http://php.net/smtp-port
    smtp_port = 587
    
    ; For Win32 only.
    ; http://php.net/sendmail-from
    sendmail_from = abc.xxx@gmail.com

标签: angularforms

解决方案


您应该为您的 Angular 应用程序设置一个后端以充当电子邮件服务器,并通过 HTTP 请求调用它。如果您还没有后端,那么像快速服务器这样简单的东西就可以了。 如何创建快速电子邮件服务器


推荐阅读