From 4b0fd1a64444ef69da027ec91862f0ad9cad3f40 Mon Sep 17 00:00:00 2001
From: fboeller <fabianboeller@googlemail.com>
Date: Sat, 6 Mar 2021 17:58:50 +0100
Subject: [PATCH] Use checkbox for error

---
 package-lock.json                                     |  8 ++++++++
 package.json                                          |  1 +
 .../src/app/load-form/load-form.component.html        |  7 +++++--
 .../src/app/load-form/load-form.component.ts          | 11 ++++++++---
 .../example-app/src/app/load-form/load-form.module.ts |  3 ++-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7eb995..060c5b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -621,6 +621,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/forms": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.2.4.tgz",
+      "integrity": "sha512-JVjSSj3lvhT5qevyle2s1rVgs8NGUOMaNO6LDDBFEpak5c4AttZXVos9zXVHg//99fG6AUumewFDgR6ksPuQCQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.2.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.2.3.tgz",
diff --git a/package.json b/package.json
index f4443ac..6c7109d 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@angular/common": "~11.2.0",
     "@angular/compiler": "~11.2.0",
     "@angular/core": "~11.2.0",
+    "@angular/forms": "^11.2.4",
     "@angular/platform-browser": "^11.2.3",
     "@angular/platform-browser-dynamic": "^11.2.3",
     "@ngrx/effects": "^11.0.1",
diff --git a/projects/example-app/src/app/load-form/load-form.component.html b/projects/example-app/src/app/load-form/load-form.component.html
index 951162e..3290670 100644
--- a/projects/example-app/src/app/load-form/load-form.component.html
+++ b/projects/example-app/src/app/load-form/load-form.component.html
@@ -1,2 +1,5 @@
-<button (click)="load(42, false)">Load</button>
-<button (click)="load(42, true)">Load with error</button>
+<form [formGroup]="form">
+  <label for="isError">If the load should result in an error</label>
+  <input type="checkbox" name="isError" formControlName="isError" required />
+  <button (click)="load(42)">Load</button>
+</form>
diff --git a/projects/example-app/src/app/load-form/load-form.component.ts b/projects/example-app/src/app/load-form/load-form.component.ts
index 7647f48..adbbb67 100644
--- a/projects/example-app/src/app/load-form/load-form.component.ts
+++ b/projects/example-app/src/app/load-form/load-form.component.ts
@@ -4,6 +4,7 @@ import { Loadable } from 'projects/ngx-loadable/src/public-api';
 import { Subject } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LoadService } from '../load.service';
+import { FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-load-form',
@@ -15,7 +16,11 @@ export class LoadFormComponent {
 
   load$ = new Subject<{ id: number; error: boolean }>();
 
-  constructor(private loadService: LoadService) {
+  form = this.fb.group({
+    isError: [false],
+  });
+
+  constructor(private loadService: LoadService, private fb: FormBuilder) {
     this.load$
       .pipe(
         switchMap(({ id, error }) =>
@@ -25,7 +30,7 @@ export class LoadFormComponent {
       .subscribe(this.loadable);
   }
 
-  load(id: number, error: boolean): void {
-    this.load$.next({ id, error });
+  load(id: number): void {
+    this.load$.next({ id, error: this.form.value.isError });
   }
 }
diff --git a/projects/example-app/src/app/load-form/load-form.module.ts b/projects/example-app/src/app/load-form/load-form.module.ts
index 838e27b..76f6f3c 100644
--- a/projects/example-app/src/app/load-form/load-form.module.ts
+++ b/projects/example-app/src/app/load-form/load-form.module.ts
@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LoadFormComponent } from './load-form.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, ReactiveFormsModule],
   declarations: [LoadFormComponent],
   exports: [LoadFormComponent],
 })