Formspree联系表格不工作angular5

时间:2018-02-11 22:17:58

标签: typescript http angular5 firebase-hosting angular-forms

因此,我尝试将formspree联系表单集成到我的angular5网站中,并遇到了一些问题。在localhost上测试时它工作正常,电子邮件是通过意图来实现的。但是,当我将我的网站部署到firebase托管时,表单无效。检查firebase站点上的控制台,看起来表单没有问题,响应总是RestController > Service > Repository 但是没有收到确认电子邮件。

以下是代码:

email.component.ts

{success: "confirmation email sent"}

email.component.html

export class EmailComponent implements OnInit {

  form: FormGroup;
  submitted: boolean;
  success: boolean;
  emailPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$';
  subjectPrefix: string;

  constructor(private http: Http, private route: ActivatedRoute, private location: Location) {}

  ngOnInit() {
    this.createForm();
    this.submitted = false;
    this.success = false;
    this.subjectPrefix = 'WEBSITE CONTACT: ';

    this.route.queryParams
      .filter(params => params.success)
      .subscribe(params => {
        console.log(params);

        this.success = params.success;
        console.log(this.success);
      });
  }

  createForm() {
    this.form = new FormGroup({
      name: new FormControl(null, Validators.required),
      email: new FormControl(null, [Validators.required, Validators.pattern(this.emailPattern)]),
      subject: new FormControl(null, Validators.required),
      message: new FormControl(null, Validators.required)
    }, {
      updateOn: 'blur'
    });
  }

  onSubmit() {
    this.submitted = true;

    if (this.form.valid) {
      this.http
        .post('https://formspree.io/your@email.com', {
          name: this.form.value.name,
          _subject: `${this.subjectPrefix}${this.form.value.subject}`,
          email: this.form.value.email,
          message: this.form.value.message
        })
        .map(res => console.log(res.json()))
        .subscribe(
          success => console.log('success'),
          error => console.log('error')
        );
    }
  }
}

0 个答案:

没有答案
相关问题