Question

我有一个包含三个字段的表单，分别是名称，电子邮件和消息（文本区域），我需要通过特定的电子邮件发送数据。我已经创建了一个端点来进行管理，但是我并不十分了解它们的工作原理/可以实现/以角度调用。因此，我需要在用户单击“发送”按钮时调用此API，以便将此数据发送到特定的电子邮件（在API上完成）。如果有人可以帮助我，那将是非常好的。因为我尝试分析其他示例，甚至尝试在Internet上搜索，但我并不真正了解它们的工作原理。

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { RegisterCustomerModel } from '../../../../core/models/registerCustomer.interface';
import { EmailExistsValidatorDirective } from '@cbc/core/directives/validators/email-exists-directive';
import { AuthService } from '@cbc/core/services/auth.service';
@Component({
  selector: 'app-contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.scss'],
})
export class ContactUsComponent implements OnInit {
  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';

  userData: RegisterCustomerModel = new RegisterCustomerModel();
  registerForm: FormGroup;
  passwordPattern = '^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[A-Z])([a-zA-Z0-9]+)$';

  @Input() errorEmptyFormMessage: string;
  @Output() submitted: EventEmitter<RegisterCustomerModel> = new EventEmitter<RegisterCustomerModel>();

  constructor(private fb: FormBuilder, private auth: AuthService) { }
// this part is in progress that i was doing to use the endpoint 
  //sendingFeedBack(event) {
   // this.auth.feedBackEmail(this.registerForm.value)
  //  .subscribe((res) => {
 //...................
 //     }
 //   });
//  }

  ngOnInit(): void {
    this.buildForm();
  }

  buildForm(): void {
    this.registerForm = this.fb.group({
      firstName: ['', [
        Validators.required,
      ]],
      email: ['', [
        Validators.required,
        Validators.email,
        Validators.pattern(this.emailPattern),
      ]],
      message: ['', [
        Validators.required,
      ]],
    });
  }

  get f() {
    return this.registerForm.controls;
  }

  onRegister() {
    if (this.registerForm.valid) {
      this.submitted.emit(this.registerForm.value);
    } else {
      this.errorEmptyFormMessage = 'Please make sure that you have filled all mandatory fields!';

    }
  }
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

.head h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: -3rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: normal;
}

.bodyone h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: 2rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: normal;
}

.bodytwo h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: 2rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: normal;
}

.bodytwo a {
  color: white;
  font-weight: bold;
}

.addressBody h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: 2rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: normal;
  width: 22.5rem;
}

.emailBody h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: 1rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: normal;
}

.emailBody a {
  color: white;
  font-weight: bold;
}

.phoneBody h4 {
  text-align: center;
  color: white;
  margin-left: -2rem;
  margin-top: 1rem;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: normal;
  padding-bottom: 3rem;
}

.phoneBody a {
  color: white;
  font-weight: bold;
}

.reg-form-wrapper {
  background: linear-gradient(59.98deg, #5674f7 0%, rgba(255, 255, 255, 0) 100%), #35adda;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 7rem;

  form {
    min-width: 70%;
  }
}

.form-viewer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  border: 0.1rem solid rgba(199, 198, 198, 0.575);
  box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem #e7e3e3;
  border-radius: 0.8rem;
  padding: 2rem 0;
  min-width: 36%;
  margin-bottom: -12rem;
  min-height: 54%;
}

.contactform {
  width: 102%;
}

.textareamessage {
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: normal;
  color: #a8a5a5;
  top: -2rem;
  border-radius: 8px;
}

.form-container {
  display: flex;
  flex-direction: column;
  background: white;
  height: 70%;
}

.form-header h3 {
  border-color: rgb(204, 217, 223);
  width: 100%;
  padding: 1rem 0;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: normal;
  text-align: center;
  color: #0486fe;
}

.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: -4rem;

  button {
    width: 19%;
    height: 3.5rem;
    font-weight: normal;
    border-radius: 1.55rem;
  }
}

.mat-raised-button.mat-primary {
  background-color: #238de4;
  color: white;
  border-radius: 4rem;

  &:hover {
    background: rgba(233, 232, 232, 0.836);
    color: #238de4;
  }
}

.confirmation-text {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

textarea {
  height: 14.9rem;
  width: 40rem;
  border: 0.1rem solid rgba(168, 165, 165, 0.5);
  box-sizing: border-box;
  border-radius: 0.8rem;
}

.error-message {
  color: #f15258;
  border: 0.1rem solid #e28e91;
  background: rgba(241, 240, 240, 0.63);
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.3rem !important;
  font-weight: 500;
  margin-bottom: 0 !important;
  width: 26.5rem;
}

mat-hint {
  font-size: 1rem;
  font-weight: 500;
  color: rgb(241, 43, 43);
  margin-bottom: 2rem;
}

.mat-error {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.form-footer {
  width: 100%;
  margin-top: 4rem;
}

<app-nav></app-nav>
<div class="reg-form-wrapper">

  <div class="head">

    <h4>CONTACT US</h4>

  </div>
  <div class="bodyone">

    <h4>Czech Business Cloud</h4>

  </div>
  <div class="bodytwo">

      <h4>powered by <a href="https://www.xitee.com"> xITee k.s.</a></h4>

  </div>
  <div class="addressBody">
    <h4>Burzovni palác Rybná 682/14  
      11000 Praha 1,<br> Česká republika</h4>

  </div>
  <div class="emailBody">
      <h4>email:<a href="http://czechbusinesscloud.com">info@czechbusinesscloud.com</a></h4>

  </div>
  <div class="phoneBody">
      <h4>phone:<a>+420 234 262 317</a></h4>
  </div>
  <div class="form-viewer">
    <div class="form-header">
      <h3> Contact form </h3>
    </div>
    <form [formGroup]="registerForm" (ngSubmit)="onRegister()">
      <div class="form-container">
        <div class="confirmation-text" *ngIf=!agreementChecked>
          <mat-error class="headError" *ngIf="errorMessage" [ngClass]="{'error-message': errorMessage}">
            {{errorMessage}}
          </mat-error>
        </div>
        <div class="confirmation-text" *ngIf=!registerForm.valid>
          <mat-error class="headError" *ngIf="errorEmptyFormMessage"
            [ngClass]="{'error-message': errorEmptyFormMessage}">
            {{errorEmptyFormMessage}}
          </mat-error>
        </div>
        <mat-form-field>
          <input matInput placeholder="Your name*" formControlName="firstName" id="firstName" />
          <mat-error *ngIf="f.firstName.invalid && f.firstName.errors.required">
            Your name is required.
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <input type="email" matInput formControlName="email" placeholder="Your email*" id="email" appEmailExists />
          <mat-error *ngIf=" f.email.invalid && f.email.errors.required">
            Your email is required.
          </mat-error>
          <mat-error
          *ngIf="f.email.errors?.appEmailExists">
          Email is already in use.
        </mat-error>
        </mat-form-field>

        <mat-form-field appearance="none" class="textareamessage">
            Your message *
          <textarea matInput  formControlName="message" maxlength="10000" id="message" class="contactform">
          </textarea>
          <mat-error *ngIf=" f.message.invalid && f.message.errors.required">
            Your message field is required.
          </mat-error>
        </mat-form-field>

        <div class="form-footer">

          <div class="button-container">
            <button mat-raised-button id="clean-button-customer" color="primary" type="submit" onclick="sendingFeedBack($event)">Send</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<app-footer></app-footer>

这是服务

private feedBackMail = '/API/mail/feedback/';

//这也是由我完成的，但是我不确定参数是电子邮件还是registerForm，但我认为应该是电子邮件

feedBackEmail(registerForm: FormGroup) {
  return this.http.post < any > (this.feedBackMail, registerForm).pipe(
    map((res) => {
      return res;
    }),
    // catchError(this.handleError),
  );
}

Answer 1

您将在app.routing.ts中创建一条路线，如

{
 "path": "/contact-us",
 "component": ContactUsComponent 
}

现在任何人都可以点击localhost:4200/contact-us来查看您与我们联系的表单，在他们填写详细信息并点击发送按钮后，该API就会被调用。

如何实现角度端点发送反馈？

1 个答案: