From bd4cffe1ae5b76a0e9402e41100a7abfd3f912e1 Mon Sep 17 00:00:00 2001 From: Gerome Grignon Date: Mon, 17 Feb 2025 12:18:40 +0100 Subject: [PATCH] docs: migrate reactive forms to standalone (#59979) PR Close #59979 --- .../examples/reactive-forms/BUILD.bazel | 1 - .../reactive-forms/src/app/app.component.ts | 1 - .../reactive-forms/src/app/app.module.ts | 30 ------------------- .../app/name-editor/name-editor.component.ts | 7 +++-- .../profile-editor.component.1.ts | 4 +-- .../profile-editor.component.2.ts | 4 +-- .../profile-editor.component.ts | 4 +-- .../examples/reactive-forms/src/main.ts | 12 ++++---- adev/src/content/guide/forms/BUILD.bazel | 1 - .../src/content/guide/forms/reactive-forms.md | 4 +-- 10 files changed, 19 insertions(+), 49 deletions(-) delete mode 100644 adev/src/content/examples/reactive-forms/src/app/app.module.ts diff --git a/adev/src/content/examples/reactive-forms/BUILD.bazel b/adev/src/content/examples/reactive-forms/BUILD.bazel index 03eefed088d..49ea1b5eda9 100644 --- a/adev/src/content/examples/reactive-forms/BUILD.bazel +++ b/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", diff --git a/adev/src/content/examples/reactive-forms/src/app/app.component.ts b/adev/src/content/examples/reactive-forms/src/app/app.component.ts index 077243c031d..64fd7d57f4d 100644 --- a/adev/src/content/examples/reactive-forms/src/app/app.component.ts +++ b/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'; diff --git a/adev/src/content/examples/reactive-forms/src/app/app.module.ts b/adev/src/content/examples/reactive-forms/src/app/app.module.ts deleted file mode 100644 index 6b1bba613bf..00000000000 --- a/adev/src/content/examples/reactive-forms/src/app/app.module.ts +++ /dev/null @@ -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 diff --git a/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts b/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts index 406d91c2802..2c4da495e93 100644 --- a/adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts +++ b/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 diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts index d44c89d080c..1aa21667c88 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts +++ b/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 diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts index a3a3f2e3e65..deee4001c89 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts +++ b/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 diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts index 0e11fa05b89..483953f5720 100644 --- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts +++ b/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 diff --git a/adev/src/content/examples/reactive-forms/src/main.ts b/adev/src/content/examples/reactive-forms/src/main.ts index 6f00233886b..f6d4d5194a8 100644 --- a/adev/src/content/examples/reactive-forms/src/main.ts +++ b/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)); diff --git a/adev/src/content/guide/forms/BUILD.bazel b/adev/src/content/guide/forms/BUILD.bazel index 68cc9611c7b..e400b2d406c 100644 --- a/adev/src/content/guide/forms/BUILD.bazel +++ b/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", diff --git a/adev/src/content/guide/forms/reactive-forms.md b/adev/src/content/guide/forms/reactive-forms.md index f66d7195713..cec2fe6643a 100644 --- a/adev/src/content/guide/forms/reactive-forms.md +++ b/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 -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. - +