Forms are ubiquitous in web applications—user registration, surveys, checkout pages, and data-entry systems. While essential, filling forms manually can be tedious and error-prone. Integrating AI-powered form autofill enhances user experience, reduces errors, and improves productivity.
This article explains how to build an AI-powered form autofill feature with Angular frontend, ASP.NET Core backend, and AI models, while following real-world best practices.
1. Understanding AI-Powered Autofill
AI-powered autofill uses machine learning or AI models to predict and pre-populate form fields based on:
User profile and historical data
Contextual information (e.g., current page or selected options)
External sources (like company databases, CRM, or email addresses)
Benefits
Reduces manual input and errors
Accelerates form completion
Improves data consistency across systems
2. Architecture Overview
Angular Frontend (Forms & UI)
|
| REST API / WebSocket
v
ASP.NET Core Web API (Business Logic)
|
| AI Recommendation Engine
v
SQL Server / ML Model / External AI Service
Frontend – displays form and dynamically fills fields based on AI suggestions
Backend – validates input, provides AI suggestions, stores historical data
AI Engine – generates field predictions using machine learning or external AI API
3. Database Design
3.1 Key Tables
Users – stores user profile data for personalization
Forms – stores metadata of forms and field definitions
FormEntries – historical submissions for AI training
SuggestionsCache – optional table to cache AI-predicted values
Example: FormEntries Table
CREATE TABLE FormEntries (
EntryId INT PRIMARY KEY IDENTITY,
UserId INT NOT NULL,
FormId INT NOT NULL,
FieldName NVARCHAR(100),
FieldValue NVARCHAR(MAX),
CreatedAt DATETIME2 DEFAULT GETDATE(),
FOREIGN KEY (UserId) REFERENCES Users(UserId)
);
Indexing:
4. ASP.NET Core Backend Implementation
4.1 Form Submission Endpoint
[HttpPost("submit")]
public async Task<IActionResult> SubmitForm([FromBody] FormSubmission submission)
{
foreach (var field in submission.Fields)
{
_dbContext.FormEntries.Add(new FormEntry
{
UserId = submission.UserId,
FormId = submission.FormId,
FieldName = field.Key,
FieldValue = field.Value
});
}
await _dbContext.SaveChangesAsync();
return Ok(new { message = "Form submitted successfully" });
}
4.2 AI Autofill Endpoint
[HttpGet("autofill/{userId}/{formId}")]
public async Task<IActionResult> GetAutofillSuggestions(int userId, int formId)
{
var historicalData = await _dbContext.FormEntries
.Where(f => f.UserId == userId && f.FormId == formId)
.ToListAsync();
var suggestions = _aiService.GenerateFieldSuggestions(historicalData);
return Ok(suggestions);
}
_aiService could be an ML.NET model, Python service, or cloud AI API
The service predicts likely values for each field
4.3 AI Model Approaches
Rule-Based + Heuristics – simple autocomplete using historical values
ML Models – predict field values based on historical patterns
Input: previous form entries, user profile, form context
Output: predicted values for each field
External AI API – services like OpenAI or Azure Cognitive Services can generate suggestions
ML.NET Example
public class FormFieldData
{
public string FieldName { get; set; }
public string PreviousValue { get; set; }
public string Context { get; set; }
}
public class FieldPrediction
{
public string FieldName { get; set; }
public string PredictedValue { get; set; }
}
Train the model on historical form submissions and predict missing fields.
5. Angular Frontend Implementation
5.1 Reactive Form Setup
this.form = this.fb.group({
firstName: [''],
lastName: [''],
email: [''],
company: [''],
phone: ['']
});
5.2 Fetch AI Suggestions
this.http.get<{[key: string]: string}>(`/api/forms/autofill/${userId}/${formId}`)
.subscribe(suggestions => {
Object.keys(suggestions).forEach(field => {
const control = this.form.get(field);
if(control && !control.value) {
control.setValue(suggestions[field]);
}
});
});
5.3 Dynamic Feedback
Highlight AI-filled fields to indicate suggestions
Provide “Accept/Override” option for user control
Optional: use tooltips explaining the suggestion source
<input formControlName="company" [title]="companySuggestion ? 'Suggested: ' + companySuggestion : ''" />
6. Real-time Autofill
this.form.get('email').valueChanges.subscribe(value => {
this.signalRService.sendFieldInput({ field: 'email', value });
});
7. Security and Privacy
Sanitize user inputs before storing or sending to AI
Protect sensitive fields like passwords, SSNs, and payment info
Use encrypted connections (HTTPS) for API calls
Comply with GDPR/CCPA if storing personal data for AI training
Optionally anonymize historical data for AI model training
8. Performance and Scalability
Cache AI suggestions for common forms to reduce AI service calls
Batch prediction requests if multiple users are filling forms simultaneously
Use lazy-loading for form fields to only request predictions for visible fields
Monitor AI service latency and fallback to historical defaults if unavailable
9. Real-world Best Practices
Incremental Learning – continually update AI models with new form submissions
Fallback Logic – if AI prediction confidence is low, leave field empty
User Control – allow users to override AI suggestions
Analytics – track which suggestions were accepted/rejected to improve model
Field Dependencies – predict some fields based on other field values (e.g., city based on zip code)
Summary
AI-powered form autofill improves user experience, accuracy, and productivity. Key implementation steps:
Design database to store historical form entries
Implement ASP.NET Core APIs to handle form submissions and provide AI suggestions
Train or integrate AI models to predict field values
Implement Angular frontend with reactive forms and dynamic autofill
Ensure security, privacy, and scalability
With this approach, developers can create forms that are intelligent, responsive, and user-friendly, reducing manual effort and errors in real-world applications.