Web API  

AI-Powered Full-Stack Development with ASP.NET Core Web API and Angular

Introduction

In modern full-stack development, one of the most common challenges is maintaining consistency between backend validation and frontend validation. As a full stack developer working with ASP.NET Web API and Angular, you often define validation rules in your backend models, but still need to replicate them on the client side.

If this duplication is not handled properly, it can lead to:

  • Unnecessary API round trips

  • Poor user experience

  • Inconsistent validation behavior

In this article, we explore a practical approach to solving this problem using:

  • .NET validation attributes

  • Angular Reactive Forms

  • Code generation tools

  • AI code assistants like ChatGPT, Codex, and Claude

User Story

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.

Functional Requirements

  • When user inputs invalid data, the GUI should respond with a warning or an error message.

  • Invalid data cannot be submitted to the backend.

Technical Requirements

  • Strictly typed reactive forms

  • Use built-in validators along with FormControl

  • Develop custom validators if necessary

  • Explore third-party or AI-based solutions before writing manual code

  • Apply client-side validation for numeric .NET types like byte, int, uint, int64, etc.

Backend with .NET Integral Types and Validation Attributes

Below is a simplified version of backend models:

public class IntegralEntity
{
    public sbyte SByte { get; set; }
    public byte Byte { get; set; }
    public short Short { get; set; }
    public ushort UShort { get; set; }
    public int Int { get; set; }
    public uint UInt { get; set; }

    [Range(-1000, 1000000)]
    public int ItemCount { get; set; }
}

public class MixedDataEntity : IntegralEntity
{
    public DateOnly DOB { get; set; }

    [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; }
}

These attributes define validation rules at the backend level. The challenge is to reflect the same rules in Angular without manually rewriting them.

Generating TypeScript Code for Angular

To avoid duplication, a code generator like WebApiClientGen with plugin "Fonlow.WebApiClientGenCore.NG2FormGroup" can be used.

This tool converts backend models into:

  • TypeScript interfaces

  • Angular FormGroup definitions

  • Validators mapped from .NET attributes

Example: Generated Angular FormGroup

export function CreateIntegralEntityFormGroup() {
    return new FormGroup({
        byte: new FormControl(undefined, [Validators.min(0), Validators.max(255)]),
        int: new FormControl(undefined, [Validators.min(-2147483648), Validators.max(2147483647)]),
        itemCount: new FormControl(undefined, [Validators.min(-1000), Validators.max(1000000)])
    });
}

This shows how .NET numeric types are mapped to Angular validators.

Why This Approach Matters

Think of this like a real-world scenario:

Before:

  • Backend rejects invalid data

  • User submits form → API fails → error shown

  • Poor UX

After:

  • Validation happens instantly in UI

  • User corrects input before submission

  • Faster and smoother experience

AI-Assisted UI Generation

Once the FormGroup is generated, AI tools can be used to create Angular components.

Prompt-Based Approach

You provide:

  • TypeScript interfaces

  • FormGroup definition

And ask AI to generate:

  • data-detail.component.ts

  • data-detail.component.html

Comparison of AI Tools

ChatGPT

  • Produces compact and readable code

  • Uses strict typing effectively

  • Generates cleaner Angular templates

Codex (VS Code Extension)

  • Better developer experience

  • Smarter handling of Angular validators

  • Aggregates validation errors efficiently

Claude

  • More verbose output

  • Defensive coding style

  • Slightly over-engineered solutions

Example: Angular Template Snippet

<mat-form-field appearance="outline">
  <mat-label>Name</mat-label>

  <input matInput formControlName="name" />

  @if (form.controls.name.errors && form.controls.name.touched) {
    <mat-error>
      @if (form.controls.name.errors['required']) { Name is required }
      @if (form.controls.name.errors['minlength']) { Minimum length is 2 }
      @if (form.controls.name.errors['maxlength']) { Maximum length is 255 }
    </mat-error>
  }
</mat-form-field>

Important Observations

  • Angular validators enforce range but not strict integer types

  • Regex from backend may not behave exactly the same in frontend

  • AI tools often default to older Angular syntax (*ngIf instead of @if)

  • Generated code may require manual refinement

Should You Generate UI Directly from Backend?

You can try generating everything from POCO classes using AI, but results may vary:

  • More verbose code

  • Less predictable structure

  • Higher need for manual cleanup

Best Approach (Recommended)

A hybrid approach works best:

  1. Use code generator for TypeScript + FormGroup

  2. Use AI for UI generation

  3. Manually refine final output

Advantages

  • Reduces duplication

  • Ensures consistency

  • Improves developer productivity

  • Faster UI development with AI

Disadvantages

  • AI output can be inconsistent

  • Requires manual review

  • Learning curve for tools

Summary

Combining traditional code generation with AI tools provides a balanced and efficient workflow for modern full-stack applications.

Code generators give you stability and predictability, while AI accelerates UI development. The key is not choosing one over the other, but finding the right balance between automation and control.

In real-world projects, this hybrid approach helps maintain clean architecture, improves user experience, and significantly reduces development time.

Membership not found