docs(forms): replace fb with formBuilder (#52261)

Shorten variable names isn't a good practice. To avoid spreading it, we removed it from Angular's documentation.

PR Close #52261

aio/content/examples/ngmodules/src/app/contact/contact.component.ts

@@ -21,8 +21,8 @@ export class ContactComponent implements OnInit {
   contactForm: FormGroup;
 
   constructor(
-      private contactService: ContactService, userService: UserService, private fb: FormBuilder) {
-    this.contactForm = this.fb.group({name: ['', Validators.required]});
+      private contactService: ContactService, userService: UserService, private formBuilder: FormBuilder) {
+    this.contactForm = this.formBuilder.group({name: ['', Validators.required]});
     this.userName = userService.userName;
   }
 

aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts

@@ -17,17 +17,17 @@ import { FormArray } from '@angular/forms';
 })
 export class ProfileEditorComponent {
   // #docregion formgroup-compare
-  profileForm = this.fb.group({
+  profileForm = this.formBuilder.group({
     firstName: [''],
     lastName: [''],
-    address: this.fb.group({
+    address: this.formBuilder.group({
       street: [''],
       city: [''],
       state: [''],
       zip: [''],
     }),
     // #enddocregion form-builder, formgroup-compare
-    aliases: this.fb.array([this.fb.control('')]),
+    aliases: this.formBuilder.array([this.formBuilder.control('')]),
     // #docregion form-builder, formgroup-compare
   });
   // #enddocregion form-builder, formgroup-compare
@@ -37,7 +37,7 @@ export class ProfileEditorComponent {
 
   // #docregion inject-form-builder, form-builder
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private formBuilder: FormBuilder) {}
   // #enddocregion inject-form-builder, form-builder
 
   updateProfile() {
@@ -50,7 +50,7 @@ export class ProfileEditorComponent {
   }
 
   addAlias() {
-    this.aliases.push(this.fb.control(''));
+    this.aliases.push(this.formBuilder.control(''));
   }
   // #docregion form-builder
 }

aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts

@@ -16,17 +16,17 @@ import { FormArray } from '@angular/forms';
 })
 export class ProfileEditorComponent {
   // #docregion required-validator, aliases
-  profileForm = this.fb.group({
+  profileForm = this.formBuilder.group({
     firstName: ['', Validators.required],
     lastName: [''],
-    address: this.fb.group({
+    address: this.formBuilder.group({
       street: [''],
       city: [''],
       state: [''],
       zip: [''],
     }),
     // #enddocregion required-validator
-    aliases: this.fb.array([this.fb.control('')]),
+    aliases: this.formBuilder.array([this.formBuilder.control('')]),
     // #docregion required-validator
   });
   // #enddocregion required-validator, aliases
@@ -37,7 +37,7 @@ export class ProfileEditorComponent {
   }
 
   // #enddocregion aliases-getter
-  constructor(private fb: FormBuilder) {}
+  constructor(private formBuilder: FormBuilder) {}
 
   updateProfile() {
     this.profileForm.patchValue({
@@ -50,7 +50,7 @@ export class ProfileEditorComponent {
   // #docregion add-alias
 
   addAlias() {
-    this.aliases.push(this.fb.control(''));
+    this.aliases.push(this.formBuilder.control(''));
   }
   // #enddocregion add-alias
   // #docregion on-submit

packages/examples/forms/ts/formBuilder/form_builder_example.ts

@@ -30,10 +30,10 @@ import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 export class FormBuilderComp {
   form: FormGroup;
 
-  constructor(@Inject(FormBuilder) fb: FormBuilder) {
-    this.form = fb.group(
+  constructor(@Inject(FormBuilder) formBuilder: FormBuilder) {
+    this.form = formBuilder.group(
         {
-          name: fb.group({
+          name: formBuilder.group({
             first: ['Nancy', Validators.minLength(2)],
             last: 'Drew',
           }),
@@ -53,8 +53,8 @@ export class FormBuilderComp {
 export class DisabledFormControlComponent {
   control: FormControl;
 
-  constructor(private fb: FormBuilder) {
-    this.control = fb.control({value: 'my val', disabled: true});
+  constructor(private formBuilder: FormBuilder) {
+    this.control = formBuilder.control({value: 'my val', disabled: true});
   }
 }
 // #enddocregion disabled-control