Skip to content

Commit 25adf32

Browse files
bennadelbennadel
committed
Add reactive-bridge demo for template-driven forms in Angular 7.2.13.
1 parent eef620f commit 25adf32

25 files changed

Lines changed: 7867 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [An Experiment In Consuming Reactive-Form Events From Template-Driven Forms In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/template-form-changes-angular7/)
1314
* [My First - And Possibly Last - Look At Reactive Forms In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/dynamic-reative-forms-angular7/)
1415
* [Using "replaceUrl" In Order To Honor The Back-Button While Chaining Absolute Redirects In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/router-chained-absolute-redirect2-angular7/)
1516
* [More Fun With Recursive Components, Tree State, And One-Way Data Flow In Angular 7.2.13](https://bennadel.github.io/JavaScript-Demos/demos/folder-tree-angular7/)

‎demos/template-form-changes-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/template-form-changes-angular7/app/app.component.htm‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!--
2+
In the following template, the [reactiveBridge] selector is attaching a directive
3+
to the existing NgForm, NgModelGroup, and NgModel directives that exposes the two
4+
(statusChange) and (valueChange) EventEmitters that are powered by the reactive
5+
event streams of the underlying FormGroup and FormControl classes.
6+
-->
7+
<form
8+
#ngFormRef="ngForm"
9+
(submit)="handleSubmit( ngFormRef )"
10+
11+
reactiveBridge
12+
(statusChange)="handleFormStatusChange( $event )"
13+
(valueChange)="handleFormValueChange( $event )">
14+
15+
<!-- NgModelGroup is used to create a context for the "name" of our NgModel. -->
16+
<span
17+
#ngModelGroupRef="ngModelGroup"
18+
ngModelGroup="pet"
19+
20+
reactiveBridge
21+
(statusChange)="handleModelGroupStatusChange( $event )"
22+
(valueChange)="handleModelGroupValueChange( $event )">
23+
24+
<input
25+
#ngModelRef="ngModel"
26+
type="text"
27+
name="name"
28+
[(ngModel)]="form.pet.name"
29+
(ngModelChange)="handleModelChange( $event )"
30+
required
31+
32+
reactiveBridge
33+
(statusChange)="handleModelStatusChange( $event )"
34+
(valueChange)="handleModelValueChange( $event )"
35+
/>
36+
37+
</span>
38+
39+
<button type="submit" [disabled]="( ! ngFormRef.valid )">
40+
Submit Form
41+
</button>
42+
43+
</form>
44+
45+
<!--
46+
Let's output the Path and State of the various NgForm directives so that we can see
47+
that the normal NgForm (and related) directives expose state that we can use to drive
48+
other user-interface styling.
49+
-->
50+
<ul>
51+
<li>
52+
<strong>NgForm[ {{ ngFormRef.path }} ]</strong>:
53+
{{ ngFormRef.valid }}
54+
</li>
55+
<li>
56+
<strong>NgModelGroup[ {{ ngModelGroupRef.path }} ]</strong>:
57+
{{ ngModelGroupRef.valid }}
58+
</li>
59+
<li>
60+
<strong>NgModel[ {{ ngModelRef.path }} ]</strong>:
61+
{{ ngModelRef.valid }}
62+
</li>
63+
</ul>

‎demos/template-form-changes-angular7/app/app.component.less‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
form {
8+
display: flex ;
9+
10+
span {
11+
margin-right: 10px ;
12+
}
13+
}
14+
15+
input,
16+
button {
17+
font-size: inherit ;
18+
}

‎demos/template-form-changes-angular7/app/app.component.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
import { NgForm } from "@angular/forms";
5+
6+
// Import the application components and services.
7+
import { ReactiveBridgeEvent } from "./form-event-bridge.directive";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
// NOTE: We could have used a ViewQuery() to get the "#ngForm" ref / NgForm directive
13+
// instance injected into the app-component constructor. This would have given us access
14+
// to ngForm.control - the underlying FormGroup. But, for the sake of the demo, I am
15+
// looking to access the FormGroup events via event-bindings in the template. That's
16+
// where the "reactive bridge" directive comes into play.
17+
@Component({
18+
selector: "my-app",
19+
styleUrls: [ "./app.component.less" ],
20+
templateUrl: "./app.component.htm"
21+
})
22+
export class AppComponent {
23+
24+
public form: {
25+
pet: {
26+
name: string;
27+
};
28+
};
29+
30+
// I initialize the app component.
31+
constructor() {
32+
33+
this.form = {
34+
pet: {
35+
name: "Lucy"
36+
}
37+
};
38+
39+
}
40+
41+
// ---
42+
// PUBLIC METHODS.
43+
// ---
44+
45+
public handleFormStatusChange( event: ReactiveBridgeEvent ) : void {
46+
47+
console.group( "form - reactiveBridge - (statusChange)" );
48+
console.log( event );
49+
console.groupEnd();
50+
51+
}
52+
53+
public handleFormValueChange( event: ReactiveBridgeEvent ) : void {
54+
55+
console.group( "form - reactiveBridge - (valueChange)" );
56+
console.log( event );
57+
console.groupEnd();
58+
59+
}
60+
61+
// NOTE: This isn't part of the reactive-bridge. This is just the normal "change"
62+
// functionality of the NgModel directive.
63+
public handleModelChange( event: string ) : void {
64+
65+
console.group( "ngModel(ngModelChange)" );
66+
console.log( event );
67+
console.groupEnd();
68+
69+
}
70+
71+
public handleModelGroupStatusChange( event: ReactiveBridgeEvent ) : void {
72+
73+
console.group( "ngModelGroup - reactiveBridge - (statusChange)" );
74+
console.log( event );
75+
console.groupEnd();
76+
77+
}
78+
79+
public handleModelGroupValueChange( event: ReactiveBridgeEvent ) : void {
80+
81+
console.group( "ngModelGroup - reactiveBridge - (valueChange)" );
82+
console.log( event );
83+
console.groupEnd();
84+
85+
}
86+
87+
public handleModelStatusChange( event: ReactiveBridgeEvent ) : void {
88+
89+
console.group( "ngModel - reactiveBridge - (statusChange)" );
90+
console.log( event );
91+
console.groupEnd();
92+
93+
}
94+
95+
public handleModelValueChange( event: ReactiveBridgeEvent ) : void {
96+
97+
console.group( "ngModel - reactiveBridge - (valueChange)" );
98+
console.log( event );
99+
console.groupEnd();
100+
101+
}
102+
103+
// NOTE: This isn't part of the reactive-bridge. This is just the normal submit
104+
// functionality of the NgForm directive.
105+
public handleSubmit( event: NgForm ) : void {
106+
107+
console.group( "ngForm(submit)" );
108+
console.log( event );
109+
console.log( JSON.stringify( this.form, null, 4 ) );
110+
console.groupEnd();
111+
112+
}
113+
114+
}

‎demos/template-form-changes-angular7/app/app.module.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { FormsModule } from "@angular/forms";
5+
import { NgModule } from "@angular/core";
6+
7+
// Import the application components and services.
8+
import { AppComponent } from "./app.component";
9+
import { ReactiveBridgeDirective } from "./form-event-bridge.directive";
10+
11+
// ----------------------------------------------------------------------------------- //
12+
// ----------------------------------------------------------------------------------- //
13+
14+
@NgModule({
15+
imports: [
16+
BrowserModule,
17+
FormsModule
18+
],
19+
declarations: [
20+
AppComponent,
21+
ReactiveBridgeDirective
22+
],
23+
bootstrap: [
24+
AppComponent
25+
]
26+
})
27+
export class AppModule {
28+
// ...
29+
}

0 commit comments

Comments
 (0)