bhylu.com

Advertisements

Angular Reactive Forms

Reactive forms keep the control model explicit in TypeScript. A typed FormControl makes its value, reset behavior and validation state available to application logic and tests.

How it works

The tool code control is non-nullable, so its normal value is a string rather than string or null. That option affects reset behavior; it is not a runtime validator for an external response. ReactiveFormsModule supplies the template directive. For several related fields, a FormGroup gives the operation a clear group contract instead of scattering standalone controls across unrelated properties.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

Example

src/app.ts

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'bh-reactive-forms',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `<label>Tool code<input [formControl]="code" /></label
    ><button type="button" (click)="code.setValue('')">Clear code</button>
    <p data-result>{{ code.value || 'No tool' }}</p>`,
})
export class App {
  code = new FormControl('DR-4', { nonNullable: true });
}

Expected result

DR-4

Typing CL-2 changes the form model and preview. Clearing the control produces the explicit No tool fallback. Access getRawValue when a complete value including disabled controls is required, and understand that a disabled control is omitted from some group value views.

Advertisements