An Experiment In Consuming Reactive-Form Events From Template-Driven Forms In Angular 7.2.13

<!--
	In the following template, the [reactiveBridge] selector is attaching a directive
	to the existing NgForm, NgModelGroup, and NgModel directives that exposes the two
	(statusChange) and (valueChange) EventEmitters that are powered by the reactive
	event streams of the underlying FormGroup and FormControl classes.
-->
<form
	#ngFormRef="ngForm"
	(submit)="handleSubmit( ngFormRef )"

	reactiveBridge
	(statusChange)="handleFormStatusChange( $event )"
	(valueChange)="handleFormValueChange( $event )">

	<!-- NgModelGroup is used to create a context for the "name" of our NgModel. -->
	<span
		#ngModelGroupRef="ngModelGroup"
		ngModelGroup="pet"

		reactiveBridge
		(statusChange)="handleModelGroupStatusChange( $event )"
		(valueChange)="handleModelGroupValueChange( $event )">

		<input
			#ngModelRef="ngModel"
			type="text"
			name="name"
			[(ngModel)]="form.pet.name"
			(ngModelChange)="handleModelChange( $event )"
			required

			reactiveBridge
			(statusChange)="handleModelStatusChange( $event )"
			(valueChange)="handleModelValueChange( $event )"
		/>

	</span>

	<button type="submit" [disabled]="( ! ngFormRef.valid )">
		Submit Form
	</button>

</form>

<!--
	Let's output the Path and State of the various NgForm directives so that we can see
	that the normal NgForm (and related) directives expose state that we can use to drive
	other user-interface styling.
-->
<ul>
	<li>
		<strong>NgForm[ {{ ngFormRef.path }} ]</strong>:
		{{ ngFormRef.valid }}
	</li>
	<li>
		<strong>NgModelGroup[ {{ ngModelGroupRef.path }} ]</strong>:
		{{ ngModelGroupRef.valid }}
	</li>
	<li>
		<strong>NgModel[ {{ ngModelRef.path }} ]</strong>:
		{{ ngModelRef.valid }}
	</li>
</ul>

// Import the core angular services.
import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";

// Import the application components and services.
import { ReactiveBridgeEvent } from "./form-event-bridge.directive";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

// NOTE: We could have used a ViewQuery() to get the "#ngForm" ref / NgForm directive
// instance injected into the app-component constructor. This would have given us access
// to ngForm.control - the underlying FormGroup. But, for the sake of the demo, I am
// looking to access the FormGroup events via event-bindings in the template. That's
// where the "reactive bridge" directive comes into play.
@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	templateUrl: "./app.component.htm"
})
export class AppComponent {

	public form: {
		pet: {
			name: string;
		};
	};

	// I initialize the app component.
	constructor() {

		this.form = {
			pet: {
				name: "Lucy"
			}
		};

	}

	// ---
	// PUBLIC METHODS.
	// ---

	public handleFormStatusChange( event: ReactiveBridgeEvent ) : void {

		console.group( "form - reactiveBridge - (statusChange)" );
		console.log( event );
		console.groupEnd();

	}

	public handleFormValueChange( event: ReactiveBridgeEvent ) : void {

		console.group( "form - reactiveBridge - (valueChange)" );
		console.log( event );
		console.groupEnd();

	}

	// NOTE: This isn't part of the reactive-bridge. This is just the normal "change"
	// functionality of the NgModel directive.
	public handleModelChange( event: string ) : void {

		console.group( "ngModel(ngModelChange)" );
		console.log( event );
		console.groupEnd();

	}

	public handleModelGroupStatusChange( event: ReactiveBridgeEvent ) : void {

		console.group( "ngModelGroup - reactiveBridge - (statusChange)" );
		console.log( event );
		console.groupEnd();

	}

	public handleModelGroupValueChange( event: ReactiveBridgeEvent ) : void {

		console.group( "ngModelGroup - reactiveBridge - (valueChange)" );
		console.log( event );
		console.groupEnd();

	}

	public handleModelStatusChange( event: ReactiveBridgeEvent ) : void {

		console.group( "ngModel - reactiveBridge - (statusChange)" );
		console.log( event );
		console.groupEnd();

	}

	public handleModelValueChange( event: ReactiveBridgeEvent ) : void {

		console.group( "ngModel - reactiveBridge - (valueChange)" );
		console.log( event );
		console.groupEnd();

	}

	// NOTE: This isn't part of the reactive-bridge. This is just the normal submit
	// functionality of the NgForm directive.
	public handleSubmit( event: NgForm ) : void {

		console.group( "ngForm(submit)" );
		console.log( event );
		console.log( JSON.stringify( this.form, null, 4 ) );
		console.groupEnd();

	}

}

// Import the core angular services.
import { AbstractControl } from "@angular/forms";
import { AbstractControlDirective } from "@angular/forms";
import { Directive } from "@angular/core";
import { EventEmitter } from "@angular/core";
import { NgForm } from "@angular/forms";
import { NgModel } from "@angular/forms";
import { NgModelGroup } from "@angular/forms";
import { Optional } from "@angular/core";
import { Self } from "@angular/core";
import { Subscription } from "rxjs";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

export interface ReactiveBridgeEvent {
	type: "statusChange" | "valueChange";
	target: AbstractControl;
	currentValue: any;
	previousValue: any | undefined;
}

@Directive({
	selector: "form[reactiveBridge],[ngModelGroup][reactiveBridge],[ngModel][reactiveBridge]",
	outputs: [
		"statusChangeEvents: statusChange",
		"valueChangeEvents: valueChange"
	],
	exportAs: "reactiveBridge"
})
export class ReactiveBridgeDirective {

	public statusChangeEvents: EventEmitter<ReactiveBridgeEvent>;
	public valueChangeEvents: EventEmitter<ReactiveBridgeEvent>;

	private control: AbstractControl | null;
	private controlDirective: AbstractControlDirective;
	private isDestroyed: boolean;
	private previousStatus: any | undefined;
	private previousValue: any | undefined;
	private subscriptions: Subscription[];

	// I initialize the reactive-bridge directive.
	// --
	// NOTE: Since this directive can be applied to three different types of elements,
	// we're going to injected all three in the SELF scope and just use whichever one
	// is defined.
	constructor(
		@Self() @Optional() ngForm: NgForm,
		@Self() @Optional() ngModelGroup: NgModelGroup,
		@Self() @Optional() ngModel: NgModel
		) {

		this.controlDirective = ( ngForm || ngModelGroup || ngModel ) !;

		this.control = null;
		this.isDestroyed = false;
		this.previousStatus = undefined;
		this.previousValue = undefined;
		this.statusChangeEvents = new EventEmitter();
		this.subscriptions = [];
		this.valueChangeEvents = new EventEmitter();

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called when the directive is being destroyed.
	public ngOnDestroy() : void {

		this.isDestroyed = true;

		for ( var subscription of this.subscriptions ) {

			subscription.unsubscribe();

		}

	}


	// I get called once after the inputs have been bound for the first time.
	public ngOnInit() : void {

		// Since the NgForm and NgModel directives create internal controls as part of
		// their initialization, the underlying control will be available immediately.
		if ( this.controlDirective.control ) {

			this.control = this.controlDirective.control;
			this.setupSubscriptions();
			return;

		}

		// If we made it this far, we're dealing with the NgModelGroup. Unlike the other
		// form directives, this one has to register itself with the form asynchronously
		// for reasons that I cannot fully understand when reading the Angular source
		// code. That said, it seems that deferring the initialization with a Promise
		// aligns with the workflow that the NgModelGroup directive is using internally.
		// --
		// NOTE: If we tried to initialize all three types of directives inside the same
		// Promise-based workflow, the NgModelGroup wouldn't fire on form-load. I have
		// no idea why. I assume it is a weird race-condition somewhere.
		Promise.resolve().then(
			() => {

				// If the Promise resolves after the directive is destroyed, skip the
				// subscriptions configuration.
				if ( this.isDestroyed ) {

					return;

				}

				this.control = this.controlDirective.control;
				this.setupSubscriptions();

			}
		);

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I setup the subscriptions on the underlying control's Reactive streams so that we
	// can power the EventEmitters on the bridge.
	private setupSubscriptions() : void {

		this.subscriptions.push(
			this.control.statusChanges.subscribe(
				( event ) => {

					this.statusChangeEvents.emit({
						type: "statusChange",
						target: this.control,
						previousValue: this.previousStatus,
						currentValue: event
					});

					this.previousStatus = event;

				}
			),
			this.control.valueChanges.subscribe(
				( event ) => {

					this.valueChangeEvents.emit({
						type: "valueChange",
						target: this.control,
						previousValue: this.previousValue,
						currentValue: event
					});

					this.previousValue = event;

				}
			)
		);

	}

}