docs: migrate reactive forms to standalone (#59979)

PR Close #59979

adev/src/content/examples/reactive-forms/BUILD.bazel

@@ -2,7 +2,6 @@ package(default_visibility = ["//visibility:public"])
 
 exports_files([
     "src/app/app.component.1.html",
-    "src/app/app.module.ts",
     "src/app/name-editor/name-editor.component.html",
     "src/app/name-editor/name-editor.component.ts",
     "src/app/profile-editor/profile-editor.component.1.html",

adev/src/content/examples/reactive-forms/src/app/app.component.ts

@@ -6,7 +6,6 @@ export type EditorType = 'name' | 'profile';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  standalone: false,
 })
 export class AppComponent {
   editor: EditorType = 'name';

adev/src/content/examples/reactive-forms/src/app/app.module.ts

@@ -1,30 +0,0 @@
-// #docplaster
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-// #docregion imports
-import {ReactiveFormsModule} from '@angular/forms';
-
-// #enddocregion imports
-import {AppComponent} from './app.component';
-import {NameEditorComponent} from './name-editor/name-editor.component';
-import {ProfileEditorComponent} from './profile-editor/profile-editor.component';
-
-// #docregion imports
-@NgModule({
-  // #enddocregion imports
-  declarations: [AppComponent, NameEditorComponent, ProfileEditorComponent],
-  // #docregion imports
-  imports: [
-    // #enddocregion imports
-    BrowserModule,
-    // #docregion imports
-    // other imports ...
-    ReactiveFormsModule,
-  ],
-  // #enddocregion imports
-  providers: [],
-  bootstrap: [AppComponent],
-  // #docregion imports
-})
-export class AppModule {}
-// #enddocregion imports

adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts

@@ -1,15 +1,18 @@
 // #docplaster
 // #docregion create-control
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+
+// #docregion imports
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-name-editor',
   templateUrl: './name-editor.component.html',
   styleUrls: ['./name-editor.component.css'],
-  standalone: false,
+  imports: [ReactiveFormsModule],
 })
 export class NameEditorComponent {
+  // #enddocregion imports
   name = new FormControl('');
   // #enddocregion create-control
 

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

@@ -2,14 +2,14 @@
 // #docregion formgroup, nested-formgroup
 import {Component} from '@angular/core';
 // #docregion imports
-import {FormGroup, FormControl} from '@angular/forms';
+import {FormGroup, FormControl, ReactiveFormsModule} from '@angular/forms';
 // #enddocregion imports
 
 @Component({
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
   styleUrls: ['./profile-editor.component.css'],
-  standalone: false,
+  imports: [ReactiveFormsModule],
 })
 export class ProfileEditorComponent {
   // #docregion formgroup-compare

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

@@ -2,7 +2,7 @@
 // #docregion form-builder
 import {Component, inject} from '@angular/core';
 // #docregion form-builder-imports
-import {FormBuilder} from '@angular/forms';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 // #enddocregion form-builder-imports, form-builder
 // #docregion form-array-imports
 import {FormArray} from '@angular/forms';
@@ -13,7 +13,7 @@ import {FormArray} from '@angular/forms';
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
   styleUrls: ['./profile-editor.component.css'],
-  standalone: false,
+  imports: [ReactiveFormsModule],
 })
 export class ProfileEditorComponent {
   // #docregion inject-form-builder

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

@@ -1,6 +1,6 @@
 // #docplaster
 import {Component} from '@angular/core';
-import {FormBuilder} from '@angular/forms';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 // #docregion validator-imports
 import {Validators} from '@angular/forms';
 // #enddocregion validator-imports
@@ -10,7 +10,7 @@ import {FormArray} from '@angular/forms';
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
   styleUrls: ['./profile-editor.component.css'],
-  standalone: false,
+  imports: [ReactiveFormsModule],
 })
 export class ProfileEditorComponent {
   // #docregion required-validator, aliases

adev/src/content/examples/reactive-forms/src/main.ts

@@ -1,7 +1,7 @@
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {AppComponent} from './app/app.component';
+import {provideZoneChangeDetection} from '@angular/core';
 
-import {AppModule} from './app/app.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideZoneChangeDetection({eventCoalescing: true})],
+}).catch((err) => console.error(err));

adev/src/content/guide/forms/BUILD.bazel

@@ -40,7 +40,6 @@ generate_guides(
         "//adev/src/content/examples/forms-overview:src/app/template/favorite-color/favorite-color.component.spec.ts",
         "//adev/src/content/examples/forms-overview:src/app/template/favorite-color/favorite-color.component.ts",
         "//adev/src/content/examples/reactive-forms:src/app/app.component.1.html",
-        "//adev/src/content/examples/reactive-forms:src/app/app.module.ts",
         "//adev/src/content/examples/reactive-forms:src/app/name-editor/name-editor.component.html",
         "//adev/src/content/examples/reactive-forms:src/app/name-editor/name-editor.component.ts",
         "//adev/src/content/examples/reactive-forms:src/app/profile-editor/profile-editor.component.1.html",

adev/src/content/guide/forms/reactive-forms.md

@@ -36,9 +36,9 @@ In the example, the user enters their name into an input field, captures that in
 <docs-workflow>
 
 <docs-step title="Import the ReactiveFormsModule">
-To use reactive form controls, import `ReactiveFormsModule` from the `@angular/forms` package and add it to your NgModule's `imports` array.
+To use reactive form controls, import `ReactiveFormsModule` from the `@angular/forms` package and add it to your Component's `imports` array.
 
-<docs-code header="src/app/app.module.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/app.module.ts" visibleRegion="imports" />
+<docs-code header="src/app/name-editor/name-editor.component.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="imports" />
 </docs-step>
 
 <docs-step title="Generate a new component with a FormControl">