Angular · Theory

Forms Advanced

Theory

34/43

Forms Advanced

Advanced forms: FormArray for a list of subjects, cross-field validator (password === confirm), valueChanges to enable a button, async validator that checks roll on the server.

Board: subjects FormArray. Add subject row. Remove row. Trap: validators on the group but not updating when one child changes — include { updateOn: 'blur' } only if you mean it.

Exam tip

FormArray + one cross-field 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 Advanced: toggle open. Say whether the panel is on screen after one click.

Short notes

DefFormArray + cross-field + async validators.
RuleUpdateOn only when you need it.
Expassword === confirm.

Angular · Theory

Forms Advanced

← All stacks

Theory

34/43

Forms Advanced

Advanced forms: FormArray for a list of subjects, cross-field validator (password === confirm), valueChanges to enable a button, async validator that checks roll on the server.

Board: subjects FormArray. Add subject row. Remove row. Trap: validators on the group but not updating when one child changes — include { updateOn: 'blur' } only if you mean it.

Exam tip

FormArray + one cross-field 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 Advanced: toggle open. Say whether the panel is on screen after one click.

Short notes

DefFormArray + cross-field + async validators.
RuleUpdateOn only when you need it.
Expassword === confirm.

Forms Advanced

Example

Short notes

Questions

Forms Advanced

Example

Short notes

Questions