chore: scratch examples used to answer user questions

src/app/app.component.html

@@ -7,30 +7,8 @@ <h1>Welcome to {{ title }}!</h1>
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
   />
 </div>
-<h2>Here are some links to help you start:</h2>
-<ul>
-  <li>
-    <h2>
-      <a target="_blank" rel="noopener" href="https://angular.io/tutorial"
-        >Tour of Heroes</a
-      >
-    </h2>
-  </li>
-  <li>
-    <h2>
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://github.com/angular/angular-cli/wiki"
-        >CLI Documentation</a
-      >
-    </h2>
-  </li>
-  <li>
-    <h2>
-      <a target="_blank" rel="noopener" href="https://blog.angular.io/"
-        >Angular blog</a
-      >
-    </h2>
-  </li>
-</ul>
+
+<app-location [(ngModel)]="location"></app-location>
+<pre>{{ location | json }}</pre>
+
+<app-error-displaying-input [formControl]="requiredFormControl"></app-error-displaying-input>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, Injector } from "@angular/core";
+import { FormControl, Validators } from "@angular/forms";
 import {
   AutoDestroyable,
   DirectiveSuperclass,
@@ -7,13 +8,17 @@ import {
   WrappedFormControlSuperclass,
 } from "s-ng-utils";
 
+// used in a stackoverflow answer: https://stackoverflow.com/a/55091023/1836506
+
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
 export class AppComponent {
   title = "failure";
+  location = { city: "Portage", country: "Michigan" };
+  requiredFormControl = new FormControl("initial", Validators.required);
 
   constructor(injector: Injector) {
     // use each function once just to show in can be imported

src/app/app.module.ts

@@ -1,11 +1,17 @@
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
-
 import { AppComponent } from "./app.component";
+import { LocationComponent } from "./location.component";
+import { ErrorDisplayingInputComponent } from "./error-displaying-input.component";
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
+  declarations: [
+    AppComponent,
+    LocationComponent,
+    ErrorDisplayingInputComponent,
+  ],
+  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/error-displaying-input.component.ts

@@ -0,0 +1,21 @@
+import { Component, Injector, Self } from "@angular/core";
+import { NgControl } from "@angular/forms";
+import { WrappedFormControlSuperclass, provideValueAccessor } from "s-ng-utils";
+
+// used to answer https://github.com/simontonsoftware/s-ng-utils/issues/4#issuecomment-484048187
+
+@Component({
+  selector: "app-error-displaying-input",
+  template: `
+    <input [formControl]="formControl" />
+    <div *ngIf="control.errors?.required">I'm required!</div>
+  `,
+})
+export class ErrorDisplayingInputComponent extends WrappedFormControlSuperclass<
+  string
+> {
+  constructor(@Self() public control: NgControl, injector: Injector) {
+    super(injector);
+    control.valueAccessor = this;
+  }
+}

src/app/location.component.ts

@@ -0,0 +1,42 @@
+import { Component, Injector } from "@angular/core";
+import { FormControlSuperclass, provideValueAccessor } from "s-ng-utils";
+
+// used in a stackoverflow answer: https://stackoverflow.com/a/55091023/1836506
+
+interface Location {
+  city: string;
+  country: string;
+}
+
+@Component({
+  selector: "app-location",
+  template: `
+    City:
+    <input
+      [ngModel]="location.city"
+      (ngModelChange)="modifyLocation('city', $event)"
+    />
+    Country:
+    <input
+      [ngModel]="location.country"
+      (ngModelChange)="modifyLocation('country', $event)"
+    />
+  `,
+  providers: [provideValueAccessor(LocationComponent)],
+})
+export class LocationComponent extends FormControlSuperclass<Location> {
+  location!: Location;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  handleIncomingValue(value: Location) {
+    this.location = value;
+  }
+
+  modifyLocation<K extends keyof Location>(field: K, value: Location[K]) {
+    this.location = { ...this.location, [field]: value };
+    this.emitOutgoingValue(this.location);
+  }
+}