สร้างและปรับใช้แบบฟอร์มเชิงมุมด้วย Netlify Forms และ Edge

การสร้างเวิร์กโฟลว์ฟรอนต์เอนด์ แบ็กเอนด์ และการปรับใช้งานของแอปต้องใช้เวลานาน ในกรณีที่แอปของคุณรวบรวมข้อมูลจากผู้ใช้ในจำนวนที่จำกัด การสร้างแบ็กเอนด์ทั้งหมดอาจไม่คุ้มค่ากับเวลาและความพยายาม ทางเลือกอื่นในการพัฒนาแบ็กเอนด์แบบสมบูรณ์คือการใช้ Netlify Forms ในบทช่วยสอนนี้ ฉันจะอธิบายวิธีที่คุณสามารถใช้แบบฟอร์มปฏิกิริยาเชิงมุมกับ Netlify Forms เนื่องจาก Netlify Forms ใช้งานได้เมื่อปรับใช้บน Netlify เท่านั้น ฉันจะแสดงวิธีปรับใช้แอปของคุณบน Netlify Edge ด้วย

ชุดเครื่องมือ

รูปแบบปฏิกิริยาเชิงมุมคือรูปแบบที่มีรูปแบบข้อมูลที่มีโครงสร้างที่สร้างขึ้นอย่างชัดเจนภายในคลาสส่วนประกอบโดยใช้ตัวให้บริการ ReactiveFormsModule รูปแบบแบบฟอร์มถูกสร้างขึ้นสำหรับองค์ประกอบอินพุตแต่ละรายการภายในมุมมองแบบฟอร์ม รูปแบบแบบฟอร์มนี้เป็นตัวอย่างของคลาส FormControl และติดตามค่าขององค์ประกอบแบบฟอร์ม รูปแบบแบบฟอร์มจะไม่เปลี่ยนรูปเนื่องจากเมื่อใดก็ตามที่มีการเปลี่ยนแปลงรูปแบบ อินสแตนซ์ FormControl จะส่งกลับแบบจำลองข้อมูลใหม่แทนที่จะอัปเดตแบบจำลองเก่า ความไม่เปลี่ยนรูปของมันทำให้การตรวจจับการเปลี่ยนแปลงมีประสิทธิภาพมากขึ้น และช่วยให้สามารถเปลี่ยนแปลงข้อมูลได้ด้วยตัวดำเนินการที่สังเกตได้ เนื่องจากองค์ประกอบอินพุตของฟอร์มเชื่อมต่อโดยตรงกับโมเดลของฟอร์ม การอัปเดตระหว่างกันจึงซิงโครนัสและไม่ต้องพึ่งพาการแสดงผล UI

Netlify เป็นแพลตฟอร์มที่ช่วยให้คุณสร้าง ปรับใช้ และโฮสต์ไซต์ที่สร้างด้วยเทคโนโลยีที่หลากหลาย ไซต์ที่สร้างด้วย Angular สามารถโฮสต์บน Netlify Netlify ยังมีเครื่องมือมากมายที่ช่วยลดความยุ่งยาก ทำให้เป็นอัตโนมัติ และเพิ่มบิลด์และการปรับใช้ไซต์เหล่านี้ เราจะใช้ผลิตภัณฑ์สองอย่างในบทช่วยสอนนี้: Netlify Edge และ Netlify Forms

ตามที่อธิบายไว้ก่อนหน้านี้ Netlify Forms เป็นคุณสมบัติการจัดการแบบฟอร์มที่รับการส่งจากแบบฟอร์ม HTML โดยอัตโนมัติ ไม่ต้องการการกำหนดค่าการประมวลผลการส่งใดๆ เช่น การสร้าง API สคริปต์ ฯลฯ คุณลักษณะนี้ใช้ได้กับแบบฟอร์มในไซต์ที่ปรับใช้บน Netlify เท่านั้น เปิดใช้งานโดยค่าเริ่มต้น ซึ่งช่วยลดการกำหนดค่าที่จำเป็นในการตั้งค่าการส่งแบบฟอร์ม การจัดการการส่งได้รับการตั้งค่าระหว่างการปรับใช้โดยที่ไฟล์ HTML ของไซต์ถูกแยกวิเคราะห์โดยบอทบิวด์ของ Netlify

Netlify Edge เป็นเครือข่ายการจัดส่งแอปพลิเคชันทั่วโลกซึ่งมีการเผยแพร่ไซต์และแอปพลิเคชัน โดยมีคุณสมบัติต่างๆ เช่น การทดสอบ A/B การย้อนกลับ การจัดเตรียม และการเปิดตัวแบบทีละขั้น การปรับใช้ทั้งหมดบน Netlify Edge เป็นแบบอะตอมมิก หมายความว่าไซต์จะใช้งานได้ก็ต่อเมื่อไฟล์ทั้งหมดได้รับการอัปโหลด/อัปเดตและการเปลี่ยนแปลงในไซต์พร้อมแล้ว เมื่อไซต์ถูกปรับใช้ ไซต์จะถูกกำหนดโดเมนย่อยบน netlify.app เมื่อปรับใช้กับการใช้งานจริง Netlify Edge ยังรองรับการแสดงตัวอย่างและการปรับใช้สาขา (การจัดเตรียม การพัฒนา ฯลฯ)

การจัดการการส่งแบบฟอร์ม Netlify ทำงานได้เนื่องจากบอทสร้างแยกวิเคราะห์แบบฟอร์ม HTML บนไซต์ในระหว่างการปรับใช้ บอทเหล่านี้ไม่พบฟอร์มที่แสดง Javascript ฝั่งไคลเอ็นต์เช่นเดียวกับในไซต์ Angular ที่คอมไพล์แล้ว ดังนั้นการตั้งค่าปกติสำหรับ Netlify Forms จะไม่ทำงานกับ Angular Forms

อย่างไรก็ตาม มีวิธีแก้ปัญหานี้ เพื่อให้ได้รับการส่ง แบบฟอร์ม HTML ธรรมดาที่ซ่อนอยู่จะถูกเพิ่มลงในไฟล์ index.html แบบฟอร์มนี้ใช้ได้กับบิลด์บอท เมื่อส่งแบบฟอร์มเชิงมุม จะมีการส่งคำขอโพสต์ไปยังแบบฟอร์มที่ซ่อนอยู่ซึ่งจากนั้น Netlify Forms จะบันทึก

ในบทความนี้ เราจะสร้าง Reactive form เราจะพัฒนาบริการเพื่อส่งคำขอโพสต์ไปยังแบบฟอร์ม HTML ที่ซ่อนอยู่ สุดท้ายนี้ เราจะปรับใช้แอปกับ Netlify Edge

ตัวอย่าง

เพื่อแสดงวิธีสร้างแอป เราจะนำตัวอย่างแบบฟอร์มคำติชมที่พบได้ทั่วไปในหลายๆ เว็บไซต์ เราจะใช้แบบฟอร์มนี้เพื่อรวบรวมความคิดเห็น/ข้อร้องเรียน คำถาม และข้อเสนอแนะจากผู้ใช้เว็บไซต์พร้อมกับชื่อและอีเมลของพวกเขา เราจะใช้มันเพื่อรวบรวมคะแนนของเว็บไซต์

ความต้องการ

ในการปฏิบัติตามบทช่วยสอนนี้ คุณจะต้องมีบัญชี Netlify และติดตั้ง Angular CLI หากคุณไม่มี CLI คุณสามารถติดตั้งโดยใช้ npm

 npm install -g @angular/cli

หากคุณยังไม่ได้ลงทะเบียนสำหรับบัญชี Netlify คุณสามารถสร้างได้ที่นี่ Netlify เสนอการลงทะเบียนผ่าน Github, Gitlab, Bitbucket หรืออีเมล ขึ้นอยู่กับวิธีการปรับใช้ที่คุณเลือกใช้ อาจเป็นข้อกำหนดอื่นๆ พวกเขาจะระบุไว้ในวิธีการปรับใช้แต่ละวิธี

การตั้งค่าแอพ

ในการเริ่มต้น เราจะสร้างแอปและเรียกมันว่า feedback เมื่อสร้าง ให้เพิ่มการกำหนดเส้นทางเมื่อระบบถามในข้อความแจ้ง

 ng new feedback

ต่อไป เราจะสร้างองค์ประกอบสามส่วน: แบบฟอร์มคำติชม หน้าข้อความการส่งที่สำเร็จ และหน้า 404 Netlify Forms ช่วยให้คุณสามารถนำทางไปยังหน้าเมื่อส่งแบบฟอร์มสำเร็จ นั่นคือสิ่งที่เราจะใช้ SuccessComponent สำหรับ

 ng gc feedback ng gc success ng gc page-not-found

หลังจากสร้างส่วนประกอบ เราจะเพิ่มเส้นทางไปยังแต่ละหน้าใน AppRoutingModule ภายในไฟล์ app-routing.module.ts

 const routes: Routes = [ { path:'', component: FeedbackComponent }, { path: 'success', component: SuccessComponent }, { path: '**', component: PageNotFoundComponent } ];

เราจะใช้บริการ FormBuilder เพื่อสร้างแบบฟอร์มปฏิกิริยาของเรา เนื่องจากสะดวกและทำซ้ำน้อยกว่าการใช้ตัวควบคุมแบบฟอร์มพื้นฐาน เพื่อให้สามารถเข้าถึงได้ เราจะต้องลงทะเบียน ReactiveFormsModule ในไฟล์ app.module.ts

เนื่องจากเราจะส่งคำขอโพสต์ไปยังแบบฟอร์ม HTML ที่ซ่อนอยู่ เราจึงต้องลงทะเบียน HttpClientModule ด้วย

 import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // other imports ReactiveFormsModule, HttpClientModule ] }) export class AppModule { }

ดำเนินการเปลี่ยนเนื้อหาของ app.component.html ให้มีเต้ารับเราเตอร์

 <router-outlet></router-outlet>

หน้าต่างๆ จะใช้สไตล์ร่วมกัน ดังนั้นให้เพิ่มสไตล์ด้านล่างใน styles.css

 html, body { height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } h1 { margin: 0; text-align: center; } h1, p, label { font-family: Arial, Helvetica, sans-serif; } p { max-width: 25rem; } #container { border: none; padding: .4rem; border-radius: 0; flex-direction: column; display: flex; } hr { width: 80%; } button { color: white; background-color: black; font-size: large; padding: .5rem; border-radius: .5rem; margin-top: 1rem; } @media screen and (min-height: 700px) { html, body { align-items: center; justify-content: center; } } @media screen and (min-width: 480px) { #container { border: .1rem solid lightgray; padding: 2rem; border-radius: .5rem; } html, body { align-items: center; justify-content: center; } }

สร้างรูปแบบปฏิกิริยา

ในคลาส FeedbackComponent เราจะเริ่มต้นด้วยการนำเข้าบริการ FormBuilder ซึ่งเราจะใช้เพื่อสร้างแบบฟอร์ม นอกจากนี้เรายังจะนำเข้าคลาส Validators สำหรับการตรวจสอบความถูกต้องของแบบฟอร์ม

 import { FormBuilder, Validators } from '@angular/forms';

จากนั้น เราจะฉีดบริการ FormBuilder โดยเพิ่มไปยังตัวสร้าง FeedbackComponent

 constructor(private fb: FormBuilder) { }

ต่อไป เราจะกำหนดรูปแบบแบบฟอร์มโดยใช้วิธีการ group ของบริการ FormBuilder ที่ฉีด นอกจากนี้เรายังจะเพิ่มคุณสมบัติ errorMsg เพื่อเก็บข้อผิดพลาดที่เราอาจพบเมื่อส่งแบบฟอร์ม รวมถึงวิธี closeError ที่จะปิดการแจ้งเตือนข้อผิดพลาดที่แสดงบนแบบฟอร์ม

การควบคุมแต่ละรายการในแบบจำลองแบบฟอร์มจะได้รับการตรวจสอบโดยใช้เครื่องมือตรวจสอบความถูกต้องจากคลาสตัว Validators ความถูกต้อง หากข้อมูลใด ๆ ไม่ผ่านการตรวจสอบ แบบฟอร์มจะไม่ถูกต้องและการส่งจะถูกปิดใช้งาน คุณสามารถเลือกเพิ่มตัวตรวจสอบความถูกต้องหลายตัวในตัวควบคุมฟอร์มได้เช่นเดียวกับในกรณีของตัวควบคุม email

 export class FeedbackComponent { feedbackForm = this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.email, Validators.required]], type: ['', Validators.required], description: ['', Validators.required], rating: [0, Validators.min(1)] }); errorMsg = ''; closeError() { this.errorMsg = ''; } // ... }

ในเทมเพลตของส่วนประกอบ ( feedback.component.html ) เราจะเพิ่มสิ่งนี้

 <div> <div class="error" [class.hidden]="errorMsg.length == 0"> <p>{{errorMsg}}</p> <span (click)="closeError()" class="close">︎</span> </div> <h1>Feedback Form</h1> <hr> <p>We'd like your feedback to improve our website.</p> <form [formGroup]="feedbackForm" name="feedbackForm" (ngSubmit)="onSubmit()"> <div> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="suggestion"> <label for="suggestion">Suggestion</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="comment"> <label for="comment">Comment</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="question"> <label for="question">Question</label><br> </p> </div> <div class="inputContainer"> <label>Description:</label> <textarea rows="6" formControlName="description"></textarea> </div> <div class="inputContainer"> <div> <label>How would you rate our site?</label> <label>{{feedbackForm.value?.rating}}</label> </div> <input formControlName="rating" type="range" name="rating" max="5"> </div> <div class="inputContainer"> <label>Name:</label> <div class="nameInput"> <input formControlName="firstName" type="text" name="firstName" placeholder="First"> <input formControlName="lastName" type="text" name="lastName" placeholder="Last"> </div> </div> <div class="inputContainer"> <label>Email:</label> <input formControlName="email" type="email" name="email"> </div> <div class="inputContainer"> <button type="submit" [disabled]="feedbackForm.invalid">Submit Feedback</button> </div> </form> </div>

โปรดทราบว่าองค์ประกอบแบบฟอร์มควรมี [formGroup]="feedbackForm" ที่สอดคล้องกับรูปแบบที่เราเพิ่งสร้างขึ้น นอกจากนี้ แต่ละองค์ประกอบอินพุตควรมี formControlName="" ที่สอดคล้องกับการควบคุมรูปแบบที่เหมือนกันในแบบจำลอง

หากต้องการจัดรูปแบบแบบฟอร์ม ให้เพิ่มสิ่งนี้ใน feedback.component.css

 #options { display: flex; flex-direction: column; } #options label { margin: 0 0 0 .2rem; } .radioOption { margin: 0 0 .2rem 0; } .inputContainer { display: flex; flex-direction: column; margin: .5rem 0 .5rem 0; } label { margin: .5rem 0 .5rem 0; } .nameInput { display: flex; flex-direction: column; } button:disabled { cursor: not-allowed; pointer-events: all; background-color: slategrey; } #ratingLabel { display: flex; justify-content: space-between; margin: .5rem 0 .5rem 0; } #ratingValue { font-weight: bolder; font-size: large; border: .1rem solid lightgray; padding: .4rem .6rem .1rem .6rem; margin: 0; vertical-align: middle; border-radius: .3rem; } .error { color: darkred; background-color: lightsalmon; border: .1rem solid crimson; border-radius: .3rem; padding: .5rem; text-align: center; margin: 0 0 1rem 0; display: flex; width: inherit; } .error p { margin: 0; flex-grow: 1; } textarea, input { margin: .1rem; font-family: Arial, Helvetica, sans-serif; padding: 5px; font-size: medium; font-weight: lighter; } .close { cursor: default; } .hidden { display: none; } @media screen and (min-width: 480px) { #options { flex-direction: row; justify-content: space-around; } .nameInput { flex-direction: row; justify-content: space-between; } }

นี่คือลักษณะของแบบฟอร์ม:

การเพิ่มแบบฟอร์ม HTML ที่ซ่อนอยู่

ตามที่ระบุไว้ก่อนหน้านี้ เราจำเป็นต้องเพิ่มรูปแบบ HTML ที่ซ่อนอยู่ซึ่งบอทบิวด์ของ Netlify Forms สามารถแยกวิเคราะห์ได้ การส่งจะถูกส่งจากแบบฟอร์มปฏิกิริยาของเราไปยังแบบฟอร์ม HTML ที่ซ่อนอยู่ แบบฟอร์ม HTML อยู่ในไฟล์ index.html

แบบฟอร์มนี้ควรมีชื่อเหมือนกับแบบฟอร์มปฏิกิริยา นอกจากนี้ ควรมีแอตทริบิวต์อื่นๆ สามอย่าง: netlify , netlify-honeypot และ hidden บอทจะมองหารูปแบบใดๆ ที่มีแอตทริบิวต์ netlify เพื่อให้ Netlify สามารถประมวลผลข้อมูลจากแบบฟอร์มเหล่านั้นได้ เพิ่มแอตทริบิวต์ netlify-honeypot เพื่อป้องกันไม่ให้แคปต์ชาแสดงเมื่อมีการส่งและเปิดใช้งานการป้องกันสแปมเพิ่มเติม

 <!doctype html> <html lang="en"> <!-- Head --> <body> <form name="feedbackForm" netlify netlify-honeypot="bot-field" hidden> <input type="text" name="firstName"/> <input type="text" name="lastName"/> <input type="text" name="email"/> <input type="text" name="feedbackType"/> <input type="text" name="description"/> <input type="text" name="rating"/> </form> <app-root></app-root> </body> </html>

สิ่งสำคัญที่ควรทราบคือ เนื่องจากคุณไม่สามารถตั้งค่าองค์ประกอบอินพุต file คุณจึงไม่สามารถอัปโหลดไฟล์โดยใช้วิธีนี้ได้

การโพสต์คำขอไปยังแบบฟอร์มที่ซ่อนอยู่

ในการส่งการส่งจากแบบฟอร์มตอบโต้ไปยังแบบฟอร์ม HTML เราจะทำการร้องขอการโพสต์ที่มีการส่งไปที่ index.html การดำเนินการจะดำเนินการในวิธีการ onSubmit ของ FeedbackComponent

อย่างไรก็ตาม ก่อนที่เราจะสามารถทำได้ เราต้องสร้างสองสิ่ง: อินเทอร์เฟซ Feedback และ NetlifyFormsService เริ่มจากอินเทอร์เฟซกันก่อน

 touch src/app/feedback/feedback.ts

เนื้อหาของไฟล์นี้จะเป็น:

 export interface Feedback { firstName: string; lastName: string; email: string; type: string; description: string; rating: number; }

NetlifyFormsService จะมีวิธีการสาธารณะในการส่งรายการตอบรับ วิธีการส่วนตัวในการส่งรายการทั่วไป และอีกวิธีหนึ่งแบบส่วนตัวเพื่อจัดการกับข้อผิดพลาด คุณสามารถเพิ่มวิธีการสาธารณะอื่นๆ สำหรับแบบฟอร์มเพิ่มเติมได้

ในการสร้าง ให้รันสิ่งต่อไปนี้:

 ng gs netlify-forms/netlify-forms

เมธอด submitEntry ส่งคืน Observable<string> เนื่องจาก Netlify ส่งหน้า HTML พร้อมการแจ้งเตือนความสำเร็จเมื่อเราโพสต์ข้อมูลไปยังแบบฟอร์ม นี่คือบริการ:

 import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } }

เราจะส่งแบบฟอร์มที่ส่งเป็น HttpParams ควรรวมส่วนหัวสำหรับ ContentType กับค่า application/x-www-form-urlencoded ตัวเลือก responseType ถูกระบุเป็น text เพราะหากสำเร็จ การโพสต์ไปยังแบบฟอร์มที่ซ่อนอยู่จะส่งคืนหน้า HTML ที่มีข้อความแสดงความสำเร็จทั่วไปจาก Netlify หากคุณไม่ใส่ตัวเลือกนี้ คุณจะได้รับข้อผิดพลาดเนื่องจากการตอบกลับจะถูกแยกวิเคราะห์เป็น JSON ด้านล่างนี้เป็นภาพหน้าจอของข้อความแสดงความสำเร็จของ Netlify ทั่วไป

ในคลาส FeedbackComponent เราจะนำเข้า NetlifyFormsService และ Router เราจะส่งรายการแบบฟอร์มโดยใช้เมธอด NetlifyFormsService.submitEntry หากการส่งสำเร็จ เราจะเปลี่ยนเส้นทางไปยังหน้าการส่งที่สำเร็จและรีเซ็ตแบบฟอร์ม เราจะใช้บริการ Router สำหรับการเปลี่ยนเส้นทาง หากไม่สำเร็จ คุณสมบัติ errorMsg จะได้รับข้อความแสดงข้อผิดพลาดและแสดงบนแบบฟอร์ม

 import { Router } from '@angular/router'; import { NetlifyFormsService } from '../netlify-forms/netlify-forms.service';

หลังจากนั้น ฉีดทั้ง NetlifyFormsService และ Router ในตัวสร้าง

 constructor( private fb: FormBuilder, private router: Router, private netlifyForms: NetlifyFormsService ) {}

สุดท้าย เรียกเมธอด NetlifyFormsService.submitEntry ใน FeedbackComponent.onSubmit

 onSubmit() { this.netlifyForms.submitFeedbackEntry(this.feedbackForm.value).subscribe( () => { this.feedbackForm.reset(); this.router.navigateByUrl('/success'); }, err => { this.errorMsg = err; } ); }

สร้างหน้าการส่งที่ประสบความสำเร็จ

เมื่อผู้ใช้เสร็จสิ้นการส่ง Netlify จะส่งกลับข้อความแสดงความสำเร็จทั่วไปที่แสดงในภาพหน้าจอสุดท้ายของส่วนก่อนหน้า อย่างไรก็ตาม คุณสามารถเชื่อมโยงกลับไปยังหน้าข้อความแสดงความสำเร็จที่คุณกำหนดเองได้ คุณทำได้โดยเพิ่ม action ตทริบิวต์ action ลงในฟอร์ม HTML ที่ซ่อนอยู่ ค่าของมันคือเส้นทางที่สัมพันธ์กับหน้าความสำเร็จที่คุณกำหนดเอง เส้นทางนี้ต้องขึ้นต้นด้วย / และสัมพันธ์กับไซต์รากของคุณ

อย่างไรก็ตาม การตั้งค่าหน้าความสำเร็จแบบกำหนดเองจะไม่ทำงานเมื่อใช้แบบฟอร์ม HTML ที่ซ่อนอยู่ หากคำขอโพสต์ไปยังแบบฟอร์ม HTML ที่ซ่อนอยู่สำเร็จ จะแสดงข้อความแสดงความสำเร็จของ Netlify ทั่วไปเป็นหน้า HTML จะไม่เปลี่ยนเส้นทางแม้ว่าจะระบุ action ตทริบิวต์แอ็ตทริบิวต์ ดังนั้นเราจะไปที่หน้าข้อความแสดงความสำเร็จแทนหลังจากส่งโดยใช้บริการ Router

ขั้นแรก ให้เพิ่มเนื้อหาไปยัง SuccessComponent ที่เราสร้างไว้ก่อนหน้านี้ ใน success.component.html ให้เพิ่ม:

 <div> <h1>Thank you!</h1> <hr> <p>Your feedback submission was successful.</p> <p>Thank you for sharing your thoughts with us!</p> <button routerLink="/">Give More Feedback</button> </div>

หากต้องการจัดรูปแบบหน้า ให้เพิ่มสิ่งนี้ใน success.component.css :

 p { margin: .2rem 0 0 0; text-align: center; }

นี่คือลักษณะของหน้า:

ในคลาส FeedbackComponent เราได้เพิ่มบริการ Router เป็นการนำเข้าและฉีดเข้าไปในตัวสร้าง ในวิธีการ onSubmit หลังจากที่คำขอสำเร็จและแบบฟอร์มถูกรีเซ็ตแล้ว เราจะไปยังหน้าการส่งที่ /success เราใช้เมธอด navigateByUrl ของเราเตอร์ในการทำเช่นนั้น

การสร้างเพจ 404

หน้า 404 อาจไม่จำเป็นแต่ก็ดีที่มี เนื้อหาของ page-not-found.component.html จะเป็น:

 <div> <h1>Page Not Found!</h1> <hr> <p>Sorry! The page does not exist.</p> <button routerLink="/">Go to Home</button> </div>

หากต้องการจัดรูปแบบ ให้เพิ่มลงใน page-not-found.component.css :

 p { text-align: center; }

นี่คือหน้าตาของหน้า 404

แก้ไขการกำหนดเส้นทางก่อนปรับใช้

เนื่องจากเราใช้บริการ Router การกำหนดเส้นทางทั้งหมดของเราจึงเสร็จสิ้นบนไคลเอนต์ หากวางลิงก์ไปยังหน้าในแอปของเราในแถบที่อยู่ (ลิงก์ในรายละเอียด) หรือมีหน้ารีเฟรช คำขอนั้นเราจะถูกส่งไปยังเซิร์ฟเวอร์ของเรา เซิร์ฟเวอร์ไม่มีเส้นทางใด ๆ ของเราเนื่องจากมีการกำหนดค่าในส่วนหน้าในแอปของเรา เราจะได้รับสถานะ 404 ในกรณีเหล่านี้

ในการแก้ไขปัญหานี้ เราต้องแจ้งให้เซิร์ฟเวอร์ Netlify เปลี่ยนเส้นทางคำขอทั้งหมดไปยังหน้า index.html ของเรา วิธีนี้เราเตอร์ Angular ของเราสามารถจัดการได้ หากคุณสนใจ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับปรากฏการณ์นี้ได้ที่นี่และที่นี่

เราจะเริ่มต้นด้วยการสร้างไฟล์ _redirects ในโฟลเดอร์ src ของเรา ไฟล์ _redirects เป็นไฟล์ข้อความธรรมดาที่ระบุกฎการเปลี่ยนเส้นทางและการเขียนซ้ำสำหรับไซต์ Netlify ควรอยู่ในไดเร็กทอรีไซต์เผยแพร่ไซต์ ( dist/<app_name> ) เราจะวางไว้ในโฟลเดอร์ src และระบุว่าเป็นสินทรัพย์ในไฟล์ angular.json เมื่อคอมไพล์แอพแล้ว จะถูกวางไว้ใน dist/<app_name>

 touch src/_redirects

ไฟล์นี้จะมีกฎด้านล่าง แสดงว่าคำขอทั้งหมดที่ส่งไปยังเซิร์ฟเวอร์ควรถูกเปลี่ยนเส้นทางไปที่ index.html นอกจากนี้เรายังเพิ่มตัวเลือกรหัสสถานะ HTTP ในตอนท้ายเพื่อระบุว่าการเปลี่ยนเส้นทางเหล่านี้ควรส่งคืนสถานะ 200 โดยค่าเริ่มต้น สถานะ 301 จะถูกส่งกลับ

 /* /index.html 200

สิ่งสุดท้ายที่เราต้องทำคือเพิ่มตัวเลือกด้านล่างใน angular.json er projects > {your_project_name} > architect > options > assets รวมไว้ในอาร์เรย์ assets :

 { "glob": "_redirects", "input": "src", "output": "/" }

ดูตัวอย่างแอปของคุณในพื้นที่

ก่อนที่คุณจะปรับใช้แอปคำติชม ทางที่ดีควรดูตัวอย่างก่อน ซึ่งช่วยให้แน่ใจได้ว่าไซต์ของคุณทำงานได้ตามที่ตั้งใจไว้ คุณอาจพบปัญหาที่เกิดจากกระบวนการสร้าง เช่น เส้นทางที่เสียหายไปยังทรัพยากร และอื่นๆ ขั้นแรก คุณจะต้องสร้างแอปของคุณ จากนั้นเราจะให้บริการเวอร์ชันที่คอมไพล์โดยใช้เซิร์ฟเวอร์ เราจะใช้เซิร์ฟเวอร์ lite ซึ่งเป็นเซิร์ฟเวอร์รีโหลดสดน้ำหนักเบาสำหรับเว็บแอป

หมายเหตุ : เนื่องจากแอปยังไม่ได้ปรับใช้บน Netlify คุณจะได้รับข้อผิดพลาด 404 เมื่อคุณพยายามส่งคำขอโพสต์ เนื่องจาก Netlify Forms ใช้งานได้กับแอปที่ปรับใช้เท่านั้น คุณจะเห็นข้อผิดพลาดในแบบฟอร์มตามที่แสดงในภาพหน้าจอด้านล่าง แต่จะใช้งานได้เมื่อคุณทำให้ใช้งานได้

1. ในการเริ่มต้น ติดตั้ง lite-server:
   

    npm install lite-server --save-dev

2. ขั้นต่อไป ภายในไดเรกทอรีพื้นที่ทำงานของแอป ให้สร้างแอปของคุณ เพื่อให้แน่ใจว่าบิลด์จะทำงานทุกครั้งที่ไฟล์ของคุณเปลี่ยนแปลง ให้ส่งแฟ --watch ไปที่ไฟล์นั้น เมื่อรวบรวมแอปแล้ว ผลลัพธ์จะถูกเขียนไปยังไดเร็กทอรีเอาต์พุต dist/<app name> หากคุณกำลังใช้ระบบควบคุมเวอร์ชัน ตรวจสอบให้แน่ใจว่าไม่ได้เช็คอินโฟลเดอร์ dist เนื่องจากมีการสร้างและใช้เพื่อการแสดงตัวอย่างเท่านั้น
   

    ng build --watch

3. หากต้องการให้บริการไซต์ที่คอมไพล์แล้ว ให้รัน lite-server กับไดเร็กทอรีเอาต์พุตบิลด์
   

    lite-server --baseDir="dist/<app name>"

ขณะนี้ไซต์ให้บริการที่ localhost:3000 ตรวจสอบบนเบราว์เซอร์ของคุณและตรวจสอบให้แน่ใจว่ามันทำงานตามที่คาดไว้ก่อนที่คุณจะเริ่มปรับใช้

การปรับใช้

คุณสามารถปรับใช้โปรเจ็กต์ Angular บน Netlify Edge ได้หลายวิธี เราจะครอบคลุมสามที่นี่:

1. ใช้ netlify-builder
2. ใช้ Git และ UI เว็บ Netlify
3. การใช้เครื่องมือ Netlify CLI

1. การใช้ netlify-builder

netlify-builder อำนวยความสะดวกในการปรับใช้แอพ Angular ผ่าน Angular CLI หากต้องการใช้วิธีนี้ แอปของคุณต้องสร้างโดยใช้ Angular CLI v8.3.0 ขึ้นไป

1. จากแท็บ Sites ของแดชบอร์ด Netlify ให้สร้างโครงการใหม่ เนื่องจากเราจะไม่ใช้ Git เพื่อสร้างโปรเจ็กต์ ให้ลากโฟลเดอร์เปล่าใดๆ ไปยังบริเวณที่มีเส้นประที่ระบุว่า "Drag and drop your site folder here" สิ่งนี้จะสร้างโปรเจ็กต์ด้วยชื่อแบบสุ่มโดยอัตโนมัติ คุณสามารถเปลี่ยนชื่อนี้ภายใต้การตั้งค่าโดเมนของเว็บไซต์ในภายหลังหากต้องการ
   

   

   
   นี่คือสิ่งที่คุณควรเห็นเมื่อสร้างโครงการของคุณแล้ว
   

   

2. ก่อนที่คุณจะปรับใช้วิธีนี้ได้ คุณจะต้องได้รับ API ID ของโปรเจ็กต์ Netlify และ โทเค็นการเข้าถึงส่วนบุคคลของ Netlify จากบัญชีของคุณ คุณสามารถรับรหัส API ของโครงการได้จากการตั้งค่าไซต์ ภายใต้ การตั้งค่าไซต์ > ทั่วไป > รายละเอียดไซต์ > ข้อมูลไซต์ คุณจะพบรหัส API ของโครงการของคุณ
   

   

   

   
   คุณสามารถรับโทเค็นเพื่อการเข้าถึงส่วนบุคคลได้ในการตั้งค่าผู้ใช้ของคุณ ที่ User Settings > Applications > Personal access tokens ให้คลิกปุ่ม New Access Token เมื่อได้รับแจ้ง ให้ป้อนคำอธิบายโทเค็นของคุณ จากนั้นคลิกปุ่ม สร้างโทเค็น คัดลอกโทเค็นของคุณ เพื่อความคงอยู่ คุณสามารถเก็บค่าเหล่านี้ไว้ในไฟล์ .env ภายในโปรเจ็กต์ของคุณ แต่อย่าเช็คอินไฟล์นี้หากคุณใช้ระบบควบคุมเวอร์ชัน
   

   

   

   

   

3. ถัดไป เพิ่ม netlify-builder ให้กับโครงการของคุณโดยใช้ ng add
   

    ng add @netlify-builder/deploy

   เมื่อติดตั้งเสร็จแล้ว คุณจะได้รับแจ้งให้เพิ่มรหัส API และโทเค็นเพื่อการเข้าถึงส่วนบุคคล
   

   

   
   คุณสามารถเลือกเพิ่มสิ่งเหล่านี้ได้ที่นี่ คุณไม่ต้องสนใจข้อความแจ้งนี้เนื่องจากระบบจะเพิ่มลงในไฟล์ angular.json ซึ่งโดยปกติแล้วจะเช็คอินหากคุณใช้ระบบควบคุมเวอร์ชัน ไม่ปลอดภัยที่จะจัดเก็บข้อมูลที่ละเอียดอ่อนประเภทนี้ในที่เก็บรหัส หากคุณไม่ได้เช็คอินไฟล์นี้ คุณสามารถป้อนรหัส API และโทเค็นการเข้าถึงส่วนบุคคลของคุณ รายการด้านล่างจะถูกแก้ไขในไฟล์ angular.json ของคุณภายใต้การตั้งค่า architect
   

    "deploy": { "builder": "@netlify-builder/deploy:deploy", "options": { "outputPath": "dist/<app name>", "netlifyToken": "", "siteId": "" } }

4. ที่เหลือก็แค่ปรับใช้แอปพลิเคชันของคุณโดยเรียกใช้:
   

    NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy

   อีกวิธีหนึ่ง คุณสามารถใส่สิ่งนี้ในสคริปต์และเรียกใช้เมื่อคุณต้องการปรับใช้แอปของคุณ
   

    # To create the script touch deploy.sh && echo "NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy" >> deploy.sh && chmod +x deploy.sh # To deploy ./deploy.sh

   นี่คือผลลัพธ์ที่คุณควรเห็นเมื่อคุณเรียกใช้คำสั่งนี้:
   

   

2. การใช้ Git และ Netlify Web UI

หากโค้ดของแอป Angular โฮสต์อยู่บน Github, Bitbucket หรือ Gitlab คุณสามารถโฮสต์โครงการโดยใช้ UI เว็บของ Netlify

1. จากแท็บ Sites บนแดชบอร์ด Netlify ของคุณ ให้คลิกปุ่ม " ไซต์ใหม่จากปุ่ม Git”
   

   

2. เชื่อมต่อกับบริการที่เก็บรหัส เลือกบริการที่โฮสต์รหัสแอปของคุณ คุณจะได้รับแจ้งให้อนุญาต Netlify เพื่อดูที่เก็บของคุณ ซึ่งจะแตกต่างกันไปในแต่ละบริการ
   

   

3. เลือกที่เก็บรหัสของคุณ
   

   

4. ถัดไป คุณจะต้องระบุการปรับใช้และการตั้งค่าบิลด์ ในกรณีนี้ ให้เลือกสาขาที่คุณต้องการปรับใช้ ระบุคำสั่ง build เป็น ng deploy --prod และไดเร็กทอรี publish เป็น dist/<your app name>
   

   

5. คลิกปุ่ม Deploy Site เท่านี้ก็เรียบร้อย

3. การใช้เครื่องมือ Netlify CLI

1. ในการเริ่มต้น ติดตั้งเครื่องมือ Netlify CLI ดังนี้:
   

    npm install netlify-cli -g

   หากการติดตั้งสำเร็จ คุณควรเห็นผลลัพธ์เหล่านี้บนเทอร์มินัลของคุณ:
   

   

2. ถัดไป เข้าสู่ระบบ Netlify โดยเรียกใช้:
   

    netlify login

   เมื่อคุณเรียกใช้คำสั่งนี้ คำสั่งนี้จะนำทางไปยังหน้าต่างเบราว์เซอร์ซึ่งคุณจะได้รับแจ้งให้อนุญาต Netlify CLI คลิกปุ่ม Authorize จากนั้นคุณสามารถดำเนินการปิดแท็บได้เมื่อได้รับอนุมัติ

   

   

3. ในการสร้างโปรเจ็กต์ Netlify ใหม่ ให้รันสิ่งต่อไปนี้บนเทอร์มินัลของคุณ:
   

    netlify init

   คุณจะได้รับแจ้งให้เชื่อมต่อแอป Angular กับโปรเจ็กต์ Netlify ที่มีอยู่หรือสร้างใหม่ เลือกตัวเลือก สร้างและกำหนดค่าไซต์ใหม่

   

   ถัดไป เลือกทีมของคุณและชื่อสำหรับไซต์ที่คุณต้องการปรับใช้ เมื่อสร้างโปรเจ็กต์แล้ว เครื่องมือ CLI จะแสดงรายละเอียดไซต์สำหรับโปรเจ็กต์ของคุณ
   

   

   หลังจากนั้นเครื่องมือ CLI จะแจ้งให้คุณเชื่อมต่อบัญชี Netlify ของคุณกับผู้ให้บริการโฮสต์ Git เพื่อกำหนดค่าเว็บฮุคและปรับใช้คีย์ คุณไม่สามารถยกเลิกได้ เลือกตัวเลือกเพื่อเข้าสู่ระบบ จากนั้นให้สิทธิ์ Netlify
   

   

   ถัดไป คุณจะถูกขอให้ป้อนคำสั่งสร้าง ใช้:
   

    ng build --prod

   หลังจากนั้น คุณจะถูกขอให้ระบุไดเร็กทอรีเพื่อปรับใช้ ป้อน dist/<app name> ด้วยชื่อแอปของคุณ
   

   

   ในตอนท้าย คำสั่งจะเสร็จสิ้นและแสดงผลนี้
   

   

4. ในการทำให้แอปใช้งานได้ ให้เรียกใช้:
   

    netlify deploy --prod

   การใช้แฟ --prod ช่วยให้แน่ใจว่าบิลด์ถูกปรับใช้กับการใช้งานจริง หากคุณละเว้นแฟล็กนี้ คำสั่ง netlify deploy จะปรับใช้บิลด์ของคุณกับ URL แบบร่างที่ไม่ซ้ำกันซึ่งใช้สำหรับการทดสอบและการแสดงตัวอย่าง เมื่อการปรับใช้เสร็จสมบูรณ์ คุณควรเห็นผลลัพธ์นี้:
   

   

กำลังดูการส่งแบบฟอร์ม

การส่งแบบฟอร์มสามารถดูได้บนแดชบอร์ด Netlify ใต้แท็บ แบบฟอร์ม ในเว็บไซต์ของคุณ คุณสามารถค้นหาได้ที่ app.netlify.com/sites/<your_site_name>/forms ในหน้านี้ แบบฟอร์มที่ใช้งานอยู่ทั้งหมดของคุณจะแสดงอยู่ในรายการ แอตทริบิวต์ชื่อที่คุณใส่ลงในองค์ประกอบแบบฟอร์มที่ซ่อนอยู่คือชื่อของแบบฟอร์มบนแดชบอร์ด

เมื่อคุณเลือกแบบฟอร์มแล้ว การส่งทั้งหมดสำหรับแบบฟอร์มนั้นจะแสดงรายการ คุณสามารถเลือกดาวน์โหลดรายการทั้งหมดเป็นไฟล์ CSV ทำเครื่องหมายว่าเป็นสแปม หรือลบออก

บทสรุป

Netlify Forms ช่วยให้คุณสามารถรวบรวมการส่งแบบฟอร์มจากแอปของคุณโดยไม่ต้องสร้างหรือกำหนดค่าแบ็กเอนด์ให้ทำ สิ่งนี้มีประโยชน์โดยเฉพาะอย่างยิ่งในแอปที่ต้องการรวบรวมข้อมูลในจำนวนที่จำกัด เช่น ข้อมูลติดต่อ ความคิดเห็นของลูกค้า การสมัครเข้าร่วมกิจกรรม และอื่นๆ

การจับคู่ฟอร์มปฏิกิริยาเชิงมุมกับฟอร์ม Netlify ช่วยให้คุณสามารถจัดโครงสร้างโมเดลข้อมูลของคุณได้ รูปแบบปฏิกิริยาเชิงมุมมีประโยชน์เพิ่มเติมในการมีโมเดลข้อมูลและองค์ประกอบของฟอร์มที่ซิงค์กัน พวกเขาไม่พึ่งพาการแสดงผล UI

แม้ว่า Netlify Forms จะทำงานเมื่อปรับใช้บน Netlify Edge เท่านั้น แต่แพลตฟอร์มโฮสติ้งนั้นค่อนข้างแข็งแกร่ง มีคุณสมบัติที่มีประโยชน์ เช่น การทดสอบ A/B และทำให้การสร้างและปรับใช้แอปเป็นไปโดยอัตโนมัติ

• ดูซอร์สโค้ดสำหรับโครงการนี้ →

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการใช้ Netlify กับแบบฟอร์มของคุณได้ที่นี่