update declarative-state

bitovi · Jan 7, 2024 · cc1f2d6 · cc1f2d6
1 parent 39a9258
commit cc1f2d6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/angular/11-declarative-state/declarative-state.md b/src/angular/11-declarative-state/declarative-state.md
@@ -226,7 +226,7 @@ You'll also add new single-responsibility streams:
 ✏️ Update __src/app/restaurant/restaurant.component.ts__
 
 @sourceref ./restaurant.component.ts
-@highlight 3-15, 29-34, 44-51, 59-137, 141-143
+@highlight 3-15, 29-34, 47-54, 62-140, 144-146
 
 ✏️ Update **src/app/restaurant/restaurant.component.html**
 

diff --git a/src/angular/11-declarative-state/restaurant.component.ts b/src/angular/11-declarative-state/restaurant.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import {
   combineLatest,
   map,
@@ -39,7 +39,10 @@ const toData = map(
   styleUrls: ['./restaurant.component.less'],
 })
 export class RestaurantComponent implements OnInit, OnDestroy {
-  form: FormGroup = this.createForm();
+  form: FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> = this.createForm();
 
   states$: Observable<Data<State>>;
   cities$: Observable<Data<City>>;
@@ -56,13 +59,13 @@ export class RestaurantComponent implements OnInit, OnDestroy {
     private restaurantService: RestaurantService,
     private fb: FormBuilder
   ) {
-    this.selectedState$ = this.form
-      .get('state')!
-      .valueChanges.pipe(startWith(''));
+    this.selectedState$ = this.form.controls.state.valueChanges.pipe(
+      startWith('')
+    );
 
-    this.selectedCity$ = this.form
-      .get('city')!
-      .valueChanges.pipe(startWith(''));
+    this.selectedCity$ = this.form.controls.city.valueChanges.pipe(
+      startWith('')
+    );
 
     this.states$ = this.restaurantService
       .getStates()
@@ -76,7 +79,7 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       takeUntil(this.onDestroy$),
       tap((states) => {
         if (states.value.length > 0) {
-          this.form.get('state')!.enable();
+          this.form.controls.state.enable();
         }
       })
     );
@@ -98,12 +101,12 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       takeUntil(this.onDestroy$),
       tap((cities) => {
         if (cities.value.length === 0) {
-          this.form.get('city')!.disable({
+          this.form.controls.city.disable({
             onlySelf: true,
             emitEvent: false,
           });
         } else {
-          this.form.get('city')!.enable({
+          this.form.controls.city.enable({
             onlySelf: true,
             emitEvent: false,
           });
@@ -116,7 +119,7 @@ export class RestaurantComponent implements OnInit, OnDestroy {
       pairwise(),
       tap(([previous, current]) => {
         if (current && current !== previous) {
-          this.form.get('city')!.patchValue('');
+          this.form.controls.city.patchValue('');
         }
       })
     );
@@ -148,8 +151,11 @@ export class RestaurantComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  createForm(): FormGroup {
-    return this.fb.group({
+  createForm(): FormGroup<{
+    state: FormControl<string>;
+    city: FormControl<string>;
+  }> {
+    return this.fb.nonNullable.group({
       state: { value: '', disabled: true },
       city: { value: '', disabled: true },
     });