diff --git a/skills/dev-skills/angular-developer/references/reactive-forms.md b/skills/dev-skills/angular-developer/references/reactive-forms.md index 5f3c11e1375..124da143bd6 100644 --- a/skills/dev-skills/angular-developer/references/reactive-forms.md +++ b/skills/dev-skills/angular-developer/references/reactive-forms.md @@ -9,7 +9,7 @@ Reactive forms are built using these fundamental classes from `@angular/forms`: - `FormControl`: Manages the value and validity of an individual input. - `FormGroup`: Manages a group of controls (an object-like structure). - `FormArray`: Manages a numerically indexed array of controls. -- `FormBuilder`: A service that provides factory methods for creating control instances. +- `FormBuilder`/`NonNullableFormBuilder`: A service that provides factory methods for creating control instances. ## Setup @@ -17,7 +17,7 @@ Import `ReactiveFormsModule` into your component. ```ts import {Component, inject} from '@angular/core'; -import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms'; +import {ReactiveFormsModule, NonNullableFormBuilder, Validators} from '@angular/forms'; @Component({ selector: 'app-profile-editor', @@ -25,20 +25,20 @@ import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} fr templateUrl: './profile-editor.component.html', }) export class ProfileEditor { - private fb = inject(FormBuilder); + private readonly fb = inject(NonNullableFormBuilder); // Using FormBuilder for concise definition - profileForm = this.fb.group({ + protected readonly profileForm = this.fb.group({ firstName: ['', Validators.required], - lastName: [''], + lastName: '', address: this.fb.group({ - street: [''], - city: [''], + street: '', + city: '', }), aliases: this.fb.array([this.fb.control('')]), }); - onSubmit() { + protected onSubmit() { console.warn(this.profileForm.value); } } @@ -63,7 +63,7 @@ Use directives to bind the model to the view: