Working with forms
Form Data Submission
Basic Form Submission with FormData
import { IHttpClient } from '@aurelia/fetch-client';
import { resolve } from '@aurelia/kernel';
export class FormService {
private http = resolve(IHttpClient);
async submitForm(formElement: HTMLFormElement): Promise<any> {
const formData = new FormData(formElement);
try {
// Body is the second parameter to post()
const response = await this.http.post('/api/forms/submit', formData);
if (!response.ok) {
throw new Error(`Form submission failed: ${response.statusText}`);
}
return await response.json();
} catch (error) {
console.error('Form submission error:', error);
throw error;
}
}
async submitFormData(data: Record<string, any>): Promise<any> {
const formData = new FormData();
// Add form fields
Object.entries(data).forEach(([key, value]) => {
if (value !== null && value !== undefined) {
if (value instanceof File || value instanceof Blob) {
formData.append(key, value);
} else if (Array.isArray(value)) {
value.forEach(item => formData.append(`${key}[]`, item));
} else {
formData.append(key, String(value));
}
}
});
// Body is the second parameter to post()
const response = await this.http.post('/api/forms/data', formData);
if (!response.ok) {
throw new Error(`Form submission failed: ${response.statusText}`);
}
return await response.json();
}
}URL-Encoded Form Submission
File Upload Operations
Single File Upload
Multiple File Upload
Upload with Progress Tracking
Advanced Form Handling
Form Validation Integration
Dynamic Form Building
File Upload with AbortController
Form Data Processing
Complex Data Structures
Best Practices
File Type and Size Validation
Error Handling and Recovery
Memory Management
Last updated
Was this helpful?