Introduction to Angular Forms - Template Driven and Reactive Forms - https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

01.html

<section class="sample-app-content">
    <h1>Template-driven Form Example (with bi-directional data binding):</h1>
    <form #myForm="ngForm" (ngSubmit)="onSubmitTemplateBased()">
        <p>
            <label>First Name:</label>
            <input type="text"  
                [(ngModel)]="user.firstName" required>
        </p>
        <p>
            <label>Password:</label>
            <input type="password"  
                [(ngModel)]="user.password" required>
        </p>
        <p>
            <button type="submit" [disabled]="!myForm.valid">Submit</button>
        </p>
    </form>
</section>

02.ts

@Component({
    selector: "template-driven-form",
    templateUrl: 'template-driven-form.html'
})
export class TemplateDrivenForm {

    user: Object = {};

    onSubmitTemplateBased() {
        console.log(this.vm);
    }

}

03.html

<section class="sample-app-content">
    <h1>Reactive Form Example:</h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" formControlName="firstName">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" formControlName="password">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>
</section>

04.ts

import { FormGroup, FormControl, Validators, FormBuilder } 
    from '@angular/forms';

@Component({
    selector: "reactive-form",
    templateUrl: 'reactive-form.html'
})
export class ReactiveFormExample {
    
    form = new FormGroup({
            "firstName": new FormControl("", Validators.required),
            "password": new FormControl("", Validators.required),
    });
    
    onSubmitModelBased() {
        console.log("reactive form submitted");
        console.log(this.form);
    }
}

05.ts

this.form.valueChanges
    .pipe(
        map((value) => {
            value.firstName = value.firstName.toUpperCase();
            return value;
        }),
        filter((value) => this.form.valid)
    )
    .subscribe((value) => {
           console.log("Reactive Form valid value: vm = ",
                       JSON.stringify(value));
        });
        
        

06.html

<section class="sample-app-content">
    <h1>Template-driven Form Example (with one-way data binding):</h1>
    <form #myForm="ngForm" (ngSubmit)="onSubmitTemplateBased(myForm.value)">
        <p>
            <label>First Name:</label>
            <input type="text"  
                [ngModel]="user.firstName" required>
        </p>
        <p>
            <label>Password:</label>
            <input type="password"  
                [ngModel]="user.password" required>
        </p>
        <p>
            <button type="submit" [disabled]="!myForm.valid">Submit</button>
        </p>
    </form>
</section>

07.ts

@Component({
    selector: "template-driven-form",
    templateUrl: 'template-driven-form.html'
})
export class TemplateDrivenForm {

    user = {
        firstName: 'John',
        password:  'test'
    };
    
    onSubmitTemplateBased(user) {
        console.log(user);
    }

}

08.html

<section class="sample-app-content">
    <h1>Template-driven Form Example (without any type of binding):</h1>
    <form #myForm="ngForm" (ngSubmit)="onSubmitTemplateBased(myForm.value)">
        <p>
            <label>First Name:</label>
            <input type="text" ngModel required>
        </p>
        <p>
            <label>Password:</label>
            <input type="password" ngModel required>
        </p>
        <p>
            <button type="submit" [disabled]="!myForm.valid">Submit</button>
        </p>
    </form>
</section>

09.ts

import {FormsModule} from "@angular/forms";

@Component({...})
export class App { }

@NgModule({
    declarations: [App],
    imports: [BrowserModule, FormsModule],
    bootstrap: [App]
})
export class AppModule {}

10.ts

import {NgModule} from "@angular/core";
import {ReactiveFormsModule} from "@angular/forms";

@Component({...})
export class App { }

@NgModule({
    declarations: [App],
    imports: [BrowserModule, ReactiveFormsModule],
    bootstrap: [App]
})
export class AppModule {}

11.html

<p>
    <button type="submit" [disabled]="!form.valid">Submit</button>
    <button (click)="partialUpdate()">Partial Update</button>
    <button (click)="fullUpdate()">Full Update</button>
    <button (click)="reset()">Cancel</button>
</p>

12.ts

fullUpdate() {
    this.form.setValue({firstName: 'Partial', password: 'monkey'});
}

partialUpdate() {
    this.form.patchValue({firstName: 'Partial'});
}

13.ts

reset() {
    this.form.reset();
}

14.ts

import { FormGroup, FormControl, Validators, FormBuilder } 
    from '@angular/forms';

@Component({
    selector: "reactive-form",
    templateUrl: 'reactive-form.html'
})
export class ReactiveFormExample {
    form = fb.group({
            "firstName": ["", Validators.required],
            "password":["", Validators.required]
        });
   
    constructor(fb: FormBuilder) {
    }
    
    onSubmitModelBased() {
        console.log("reactive form submitted");
        console.log(this.form);
    }
}

Probably should be this.user instead of the this.vm.

https://gist.github.com/jhades/939d05ff8e062609a04e7e73bb337e64#file-02-ts-L10

.filter((value) => this.form.valid)

does not work anymore

Should line 2 of 12.ts be:
this.form.setValue({firstName: 'Partial', password: 'monkey'});
considering the following text of the document http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/