Angular · Theory

Forms

Theory

17/43

Forms

Template-driven: ngModel on the fields, FormsModule. Fast for a tiny name+roll form. Reactive: FormGroup / FormControl in TS, ReactiveFormsModule. Better when validators grow.

Board: name required, roll number. Invalid → Save disabled. Don’t trust the UI — validate again on the server. Trap: mixing ngModel and FormControl on the same input.

Exam tip

When ngModel vs FormGroup. One required validator.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Forms: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTemplate-driven = ngModel. Reactive = FormControl.
RuleDisable Save while invalid. Server still checks.
TrapMixing both styles on one field.

Angular · Theory

Forms

← All stacks

Theory

17/43

Forms

Template-driven: ngModel on the fields, FormsModule. Fast for a tiny name+roll form. Reactive: FormGroup / FormControl in TS, ReactiveFormsModule. Better when validators grow.

Board: name required, roll number. Invalid → Save disabled. Don’t trust the UI — validate again on the server. Trap: mixing ngModel and FormControl on the same input.

Exam tip

When ngModel vs FormGroup. One required validator.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Forms: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTemplate-driven = ngModel. Reactive = FormControl.
RuleDisable Save while invalid. Server still checks.
TrapMixing both styles on one field.

Forms

Example

Short notes

Questions

Forms

Example

Short notes

Questions