From cc1f2d68cb67599dabfa3d50633f9a75cba6e93e Mon Sep 17 00:00:00 2001
From: fabioemoutinho <fabioemoutinho@gmail.com>
Date: Sun, 7 Jan 2024 17:48:15 -0300
Subject: [PATCH] update declarative-state

---
 .../11-declarative-state/declarative-state.md |  2 +-
 .../restaurant.component.ts                   | 34 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/angular/11-declarative-state/declarative-state.md b/src/angular/11-declarative-state/declarative-state.md
index 8d6f10e71..b56b0c5ac 100644
--- 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
index 796673fa6..119516cf8 100644
--- 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 },
     });