我的电子邮件表单提交条件不起作用

Question

我有一个 angular 应用程序（联系表）和 springboot 应用程序，当提交联系表时，我正在使用它们通过 gmail 发送电子邮件。

我遇到的问题是负面情况没有被捕获，从某种意义上说，如果我的 springboot 应用程序（电子邮件）关闭，我的 angular 应用程序仍然说它成功而不是说“电子邮件服务中断”。目前正在发生的事情是，在这两种情况下都会发送状态成功，即使 springboot 应用程序已关闭。

有些地方我的情况不正常，任何形式的帮助都会很有帮助。

我的contactus.component.ts文件如下：

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Loader } from '@googlemaps/js-api-loader';
import { HttpClient } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import * as $ from 'jquery';
import { NgForm } from '@angular/forms';
import { FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-contactus',
  templateUrl: './contactus.component.html',
  styleUrls: ['./contactus.component.css'],
})
export class ContactusComponent implements OnInit {
  formData: FormGroup;
  submitted = false;
  alert: boolean = false;
  pattern = '^[0-9_-]{10,12}';

  constructor(private http: HttpClient, private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.formData = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      phone: [
        '',
        [
          Validators.required,
          Validators.pattern('^[0-9]*$'),
          Validators.minLength(10),
        ],
      ],
      email: ['', [Validators.required, Validators.email]],
      desc: ['', Validators.required],
    });
  }
  // convenience getter for easy access to form fields
  get f() {
    return this.formData.controls;
  }

  onClickSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.formData.invalid) {
      return;
    }
    console.log('First Name:' + this.formData.value.first_name);
    console.log('Last Name:' + this.formData.value.last_name);
    console.log('Description:' + this.formData.value.desc);
    console.log('Email:' + this.formData.value.email);
    console.log('Phone Number:' + this.formData.value.phone);

    let mailData = {
      from: 'test1@gmail.com',
      subject: 'Enquiry From  Website User',
      body:
        'Hello Admin, \n           You have an Enquiry from a website user, user information is as below: \n\n' +
        '------------------------------------------------------------------------------------' +
        '\n' +
        'First Name : ' +
        this.formData.value.first_name +
        '\n' +
        'Last Name : ' +
        this.formData.value.last_name +
        '\n' +
        'Description of the Query : ' +
        this.formData.value.desc +
        '\n' +
        'Email Address : ' +
        this.formData.value.email +
        '\n' +
        'Phone Number : ' +
        this.formData.value.phone +
        '\n' +
        '------------------------------------------------------------------------------------\n' +
        'Thank you,\n Admin',
    };

    this.http.post<any>('http://localhost:8084/mail', mailData).subscribe(
      (error) => {
        status = error;
        console.log('status error= ' + error.error.text);
        alert('Email Service is down, sorry for inconvenience caused');
      },
      (data) => {
        console.log('status success = ' + status);
        this.alert = true;
        alert(
          '\n\nYour Enquiry is Submitted Successfully, we will reach out to you at the earliest !!\n\n\n Thank you,\n Admin'
        );
        //window.location.reload();
      }
    );
  }
}

我的邮件控制器文件：

package com.sami.EmailClientHMW.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.*;


@RestController
public class MailController {

    @Autowired
    private JavaMailSender mailSender;
    @GetMapping("/testing")
    public String Testing()
    {
        return "Welcome to HMW Email Client Version..New!!";
    }

    @PostMapping("/mail")
    @CrossOrigin
    public String sendmail(@RequestBody MailRequest request) {
        sendSimpleEmail(request.getFrom(), request.getBody(), request.getSubject());
        return "email sent successfully";
    }

    private void sendSimpleEmail(
            String fromEmail,
            String body,
            String subject)
    {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom("test1@gmail.com");
        message.setTo("test1@gmail.com");
        message.setSubject(subject);
        message.setText(body);
            mailSender.send(message);
        System.out.println("Mail Sent Successfully..!!");
    }
}

还有我的 html 文件：

<div class="myDiv" class="form1">
  <div><p align="center">Enter Your Contact Details</p></div>
  <form
    [formGroup]="formData"
    (ngSubmit)="onClickSubmit()"
    data-empty=""
    action="#"
    method="post"
  >
    <div class="form-group" class="label">
      First Name :
      <input
        type="text"
        formControlName="first_name"
        placeholder="Enter your First Name :"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }"
      />
      <div *ngIf="submitted && f.first_name.errors" class="invalid-feedback">
        <div *ngIf="f.first_name.errors.required">First Name is required</div>
      </div>
      <br />
    </div>
    <div class="form-group" class="label">
      Last Name :
      <input
        type="text"
        formControlName="last_name"
        placeholder="Enter your Last Name :"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.last_name.errors }"
      />
      <div *ngIf="submitted && f.last_name.errors" class="invalid-feedback">
        <div *ngIf="f.last_name.errors.required">Last Name is required</div>
      </div>
      <br />
    </div>
    <div class="form-group" class="label">
      Description :
      <textarea
        rows="4"
        cols="90"
        formControlName="desc"
        placeholder="Enter the Description :"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.desc.errors }"
      ></textarea>
      <!--      <input type="text" formControlName="desc" placeholder="Enter the Description :" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.desc.errors }" />-->
      <div *ngIf="submitted && f.desc.errors" class="invalid-feedback">
        <div *ngIf="f.desc.errors.required">Description is required</div>
      </div>
      <br />
    </div>
    <div class="form-group" class="label">
      Email Address :
      <input
        type="text"
        formControlName="email"
        placeholder="Enter your Email Address :"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
      />
      <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
        <div *ngIf="f.email.errors.required">Email is required</div>
        <div *ngIf="f.email.errors.email">
          Email must be a valid email address
        </div>
      </div>
      <br />
    </div>
    <div class="form-group" class="label">
      Phone Number :
      <input
        type="text"
        formControlName="phone"
        placeholder="Enter your Phone Number :"
        class="form-control"
        [ngClass]="{ 'is-invalid': submitted && f.phone.errors }"
      />
      <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
        <div *ngIf="f.phone.errors.required">Phone Number is required</div>
        <!--        <div *ngIf="f.phone.errors.phone">Enter 10 digit Mobile Number.</div>-->
        <div
          *ngIf="f.phone.errors.pattern || f.phone.errors.maxlength || f.phone.errors.minlength"
        >
          Phone number must be at least 10 numbers
        </div>
      </div>
      <br />
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit Your Query</button>
    </div>
  </form>
</div>

Answer 1

知道了..在互联网上进行了大量研究后，我终于解决了这个问题。在导入和输入下面，我必须包含它才能成功运行。在这里添加，这样如果其他人遇到同样的问题，他们可以看看这个来解决问题。

import { HttpHeaders, HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; 

let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', }), responseType: 'text' as 'json' }; 

this.http.post<any>(environment.apiBaseUrl+'/mail',mailData,httpOptions).subscribe

我的电子邮件表单提交条件不起作用

my email form submit condition not working

angular

spring-boot

email

angular-forms