Once again the QuestionEditComponent will be our lab rat; open its TypeScript class file and update it with the following highlighted lines:

[...]

export class QuestionEditComponent {
    title: string;
    question: Question;
    form: FormGroup;
    activityLog: string;

[...]

createForm() {
    this.form = this.fb.group({
        Text: ['', Validators.required]
    });

    this.activityLog = '';
    this.log("Form has been initialized.");

    // react to form changes
    this.form.valueChanges
        .subscribe(val => {
            if (!this.form.dirty) {
                this.log("Form Model has been loaded.");
            }
            else {
                this.log("Form was updated by the user.");
            }
        });
}

log(str: string) {
    this.activityLog += "["
        + new Date().toLocaleString()
        + "] " + str + "<br />";
&gt;}

[...]

In the preceding code, we provided our Form Model with a simple, yet effective logging feature that will register any change activity performed by the framework and/or by the user.

As we can see, all the logic has been put within the createForm() function, because this is where the Form Model gets initialized--along with the Observable we need to monitor. The log() function is just a shortcut to append a basic timestamp to the log activity string and add it to the activityLog local variable in a centralized way.

In order to enjoy our new logging feature to the fullest, we have to find a way to put the activityLog on screen. To do that, open the QuestionEditComponent template file and add the following highlighted lines to our existing Form debug info panel:

<div class="panel panel-info"
     style="margin-top: 20px;">
    <div class="panel-heading">Form debug info</div>
    <div class="panel-body">
        <p><strong>Form value:</strong></p>
        <div class="help-block">
            {{ form.value | json }}
        </div>
        <p><strong>Form status:</strong></p>
        <div class="help-block">
            {{ form.status | json }}
        </div>
        <p><strong>Form activity log:</strong></p>
        <div class="help-block">
            <span *ngIf="activityLog" 
                [innerHTML]="activityLog"></span>
        </div>
    </div>
</div>

That's it, now the activity log will be shown in a truly Reactive way.

All we need to do now is to test our new activity log. To do so, run the project in debug mode, go straight to QuestionEditComponent by editing an already-existing question, play with the form fields, and see what happens in the Form debug info panel:

The first log should trigger automatically right after the Form Model initialization, which should happen quite fast; the second log should also trigger automatically as soon as the HttpClient retrieves the question JSON and the Form Model gets updated. Then, the form will log any update performed by the user; all we can do is change the text area, yet that's more than enough for our humble reactivity test to complete successfully.