Netlify и Angular Forms Ajax

Если вы похожи на меня, вам, вероятно, нравится простота, которую Netlify предоставляет в своей платформе развертывания и хостинга. Однако для того, чтобы заставить Angular Form работать, потребовалось немного больше настроек, чем я ожидал. В этом посте подробно рассказывается, как я заставил это работать.

Я не буду объяснять, как создать реактивную форму Angular, я скорее перейду к сути и покажу, что именно должно быть на месте, чтобы реактивная форма работала в Netlify.

TL: DR; Если хотите, переходите к основным выводам

Во-первых…

в index.html добавьте форму, подобную этой, которая содержит все необходимые поля.

// index.html
<form name=”contact” netlify netlify-honeypot=”bot-field” hidden>   
  <input type=”text” name=”name” />
  <input type=”email” name=”email” />
  <select name=”subject”></select>
  <textarea name=”message”></textarea>
</form>

Во-вторых…

В вашем компоненте, который обрабатывает вашу форму, вам нужно добавить скрытый ввод, который имеет значение имени ‹form›, которое мы только что добавили в index.html.

изменить: после того, как моя форма была запущена и запущена, я смог удалить это, на самом деле это может быть совершенно ненужным для форм, отправленных javascript.

// contact.component.html
<input type="hidden" name="form-name" value="contact" /

Третий

создайте свою форму в своем контактном компоненте. Секрет здесь в том, чтобы убедиться, что вы передаете имя своей формы в качестве параметра 'form-name'. Убедитесь, что форма также 'application/x-www-form-urlencoded'.

// contact.component.ts
this.contactForm = this.fb.group({
  name: ['', Validators.required],
  ... the rest of your contact forms form groups 
});
submitForm() {
const body = new HttpParams()
  .set('form-name', 'contact') <- this is very important
  .append('name', this.contactForm.value.name)
  
  ... the rest of your contact forms form groups
  this.http.post('/', body.toString(), {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}).subscribe(
    res => {}
  );
}

Ключевые выводы

Вам нужно добавить параметр form-name при отправке формы через Ajax.

.set('form-name', 'contact')

Отправка сообщения по маршруту ‘/’ работает нормально.

Вы должны использовать 'application/x-www-form-urlencoded'

Если вы не хотите использовать HttpParams ... вы можете сделать все тело одной длинной строкой, и хотя это технически работает, это не так чисто.

const body = `form-name=contact&name=${this.contactForm.value.name}&email=${this.contactForm.value.email}&subject=${this.contactForm.value.subject}&message=${this.contactForm.value.message}`;

Вы просто замените body.toString() блоком кода выше.

После всего этого вы должны начать видеть отправку формы на странице обзора Netlify!

Еще раз спасибо Netlify за отличную платформу!

Спасибо за чтение! Меня зовут Аррон, я веб-разработчик фронтенда и занимаюсь делами в Orange Circle Company.