Ever wondered why you’re still typing the same validation rules — min lengths, regex patterns, numeric ranges — into both your ASP.NET backend and Angular frontend, like some masochistic ritual?
It’s 2024. Full-stack development on ASP.NET Core Web API and Angular shouldn’t feel like pushing a boulder uphill. But here we are.
Look. The original pitch nails the pain: “As a full stack software developer, after developing ASP.NET Web API with data validations in the Web API bindings, I would like the SPA on Angular framework to have client side validations to reduce round trips of related data error and improve user experience.”
Spot on. Invalid data? GUI screams error. No submit button for garbage. Strictly typed reactive forms. Built-in validators. Custom ones if needed. And — here’s the kicker — transform .NET attributes straight to Angular validators.
Enter WebApiClientGen, with its NG2FormGroup plugin. It chews your POCO classes like IntegralEntity and MixedDataEntity, spits out TypeScript interfaces and FormGroups. Magic? Or smoke?
Does WebApiClientGen Actually Work?
Take this POCO:
public class MixedDataEntity : IntegralEntity { public DateOnly DOB { get; set; } [System.ComponentModel.DataAnnotations.Required] [MinLength(2), MaxLength(255)] public string Name { get; set; } [RegularExpression(@”^(https?:\/\/)?[da-z.-]+.[a-z.]{2,6}([/\w .-])\/?$”)] public Uri Web { get; set; } [EmailAddress, MaxLength(255)] public string EmailAddress { get; set; } }
Generator output? A FormGroup with Validators.required on name, pattern for web (that URL regex), email validator on emailAddress. Numeric fields from the base class get min/max bounds pulled from .NET types — sbyte (-128 to 127), uint (0 to 4e9), even that [Range(-1000, 1000000)] on ItemCount.
Impressive. It handles inheritance too — IntegralEntity’s fields cascade down. DOB becomes a DateOnlyFormControl (smart). No more manual drudgery.
But. Does it cover everything? Custom validators? Nah, not out of the box. Third-party regex quirks? Might choke. DateOnly to Angular date picker? You’ll tweak.
And the API call? POST to MixedDataEntity, entity from the form. Clean.
Short version: it works for 80% of CRUD boilerplate. The rest? Your problem.
Here’s my unique take — this echoes the early days of Swagger/OpenAPI generators. Remember? Everyone promised ‘describe once, generate everywhere.’ We got decent client SDKs, but full UIs? Still half-baked. WebApiClientGen feels like that sequel: great for forms, but don’t ditch your IDE yet. Bold prediction: in two years, AI agents (Copilot, anyone?) will eat this alive, generating and customizing on the fly.
Why Does Client-Side Validation Still Matter in 2024?
Round trips suck. User types junk email, hits submit — boom, 500ms spinner, then ‘invalid.’ Frontend validation? Instant red squiggle.
Angular’s reactive forms shine here. FormControl with Validators.minLength(2), pattern, required. Typed? Yup, interfaces match your DTOs.
The generator bridges the gap. .NET’s [Required], [EmailAddress], [Range] become Angular validators. Numeric types auto-get bounds — byte 0-255, int64’s full glory.
Corporate hype alert: the post calls it ‘AI code agent.’ Wait, what? It’s a code generator, not ChatGPT. No learning, no natural language. Just templates chugging attributes. Don’t buy the AI spin — that’s PR fluff.
Still, for ASP.NET Core devs glued to Angular (yeah, you enterprise folks), it’s a time-saver. Cut form coding by 70%? Plausible.
Wander a bit: imagine scaling. Ten entities, each with nested validations. Hand-code? Weeks. Generate? Hours. But lock-in? You’re tied to this tool’s quirks. Migrate to React? Regenerate everything.
Punchy truth: it’s a band-aid on full-stack mismatch. Real fix? Shared schema tools like JSON Schema everywhere. But that’s another rant.
The Catch With Generated Code
It generates observables for HTTP too. postMixedDataEntity(entity). Neat.
But inspect closer:
export function CreateMixedDataEntityFormGroup() { return new FormGroup({ // … tons of FormControls with precise validators }); }
Copy-paste friendly. But verbose. Every int gets min/max for its full range — even if your business logic ignores extremes. Overkill?
Customization? Edit the output, sure. But regen wipes it. Fork the generator? Advanced users only.
Dry humor: it’s like that intern who does 90% right, then spells your name wrong. Useful. Annoying.
For numeric-heavy entities — inventory counts, IDs — gold. Strings with regex? Mostly. Dates? Meh.
And third-party? Author pushes it before hand-crafting. Smart.
Is This the Future, or Just Another Tool?
Skeptical me says: tool. Not future. AI code agents (real ones) will parse your API spec, generate forms, add custom logic, even write tests. WebApiClientGen? Static mapper.
Historical parallel: NHibernate for ORM. Saved boilerplate, but hid SQL mess. This hides validation sync — until it doesn’t.
Try it. NuGet WebApiClientGen, plugin Fonlow.WebApiClientGenCore.NG2FormGroup. Point at your controller. Regen on model changes.
Worth it for solo devs? Maybe. Teams? Yes, consistency win.
Final jab: if you’re still greenfielding Angular forms in 2024, question your stack. But props — this scratches the itch.
**
🧬 Related Insights
- Read more: TrueNAS Plex: Building an Impenetrable Homelab Fortress
- Read more: Why Observability Shouldn’t Be Ops’ Dirty Secret Anymore
Frequently Asked Questions**
What is WebApiClientGen for ASP.NET and Angular?
Code generator that turns your ASP.NET Core DTOs and validations into Angular reactive forms and TypeScript clients.
Does WebApiClientGen handle custom .NET validators?
Built-ins yes (Required, Range, Email). Custom? Limited — extend the templates yourself.
Can I use WebApiClientGen with Angular 17+?
Yes, outputs modern reactive forms. Test your Angular version’s FormControl compatibility.
