reactive approach - form is created programmatically and synchronized with the DOM

    import { Component, ElementRef } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      ...
    })
    export class AppComponent {
      ...
      onSubmit(form: NgForm) {
        console.log(form);
      }
    }
        

set container with class form-group

in the onSubmit argument the data object is form.value

    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div id="user-data">
            <div class="form-group">
                <label for="username">Username</label>
                <input 
                    type="text" 
                    id="username" 
                    class="form-control" 
                    ngModel 
                    name="username">
            </div>
            ...
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
        

    <form (ngSubmit)="onSubmit()" #f="ngForm">
        ...
    </form>
        

the arg for ViewChild should be the local reference declared in the markup

    import { Component, ViewChild } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      ...
    })
    export class AppComponent {
      @ViewChild('f') signupForm: NgForm;
      ...
      onSubmit() {
        console.log(this.signupForm);
      }
    }
        

the email validator is not very robust, it finds a@a to be a valid email address

when submitted check the valid property of the form and its controls

    <form (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data">
            ...
            <div class="form-group">
                <label for="email">Mail</label>
                <input type="email" id="email" class="form-control" ngModel name="email" required email>
            </div>
        </div>
        ...
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>  
        

    <form (ngSubmit)="onSubmit()" #f="ngForm">
        ...
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
    </form>
        

    input.ng-invalid.ng-touched, select.ng-invalid.ng-touched {
      border: 1px solid red;
    }
        

add spans containing validation messages using ngIf directives

    <form (ngSubmit)="onSubmit()" #f="ngForm">
    <div id="user-data">
        ...
        <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" required email #email="ngModel">
            <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email.</span>
        </div>
    </div>
    ...
    <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
    </form>
        

    import { Component, ViewChild } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      ...
    })
    export class AppComponent {
      @ViewChild('f') signupForm: NgForm; 
      defaultQuestion = 'pet';
      ...
    }
        

    <form (ngSubmit)="onSubmit()" #f="ngForm">
        ...
        <div class="form-group">
            <label for="secret">Secret Questions</label>
            <select id="secret" class="form-control" [ngModel]="defaultQuestion" name="secret" required #secret="ngModel">
                <option value="pet">Your first Pet?</option>
                <option value="teacher">Your first teacher?</option>
            </select>
            <span class="help-block" *ngIf="!secret.valid && secret.touched">Please select a secret question.</span>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
    </form>
        

    import { Component, ViewChild } from '@angular/core';
    import { NgForm } from '@angular/forms';

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

      @ViewChild('f') signupForm: NgForm;
      defaultQuestion = 'pet';
      answer = '';  
      ...
    }
        

use string interpolation of the new property to display the property's value

    <div class="form-group">
        <textarea name="questionAnser" rows='3' [(ngModel)]='answer' class='form-control'></textarea>
        <p>Your reply : {{ answer }}</p>
    </div>
        

• no binding, used to inform Angular the input is a control
• one-way binding to preload controls
• two-way binding as shown above

ngModelGroup directive and a local reference in the user-data div containing the username and email divs

add a conditional error message at the bottom of the div

          <form (ngSubmit)="onSubmit()" #f="ngForm">
            <div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">
              <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" class="form-control" ngModel name="username" required #username="ngModel">
                <span class="help-block" *ngIf="!username.valid && username.touched">Please enter a username.</span>
              </div>
              <button class="btn btn-default" type="button">Suggest an Username</button>
              <div class="form-group">
                <label for="email">Mail</label>
                <input type="email" id="email" class="form-control" ngModel name="email" required email #email="ngModel">
                <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email.</span>
              </div>
              <p *ngIf="!userData.valid && userData.touched">User data is invalid.</p>
            </div>
            ...
          </form>
        

    import { Component, ViewChild } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      ...
    })
    export class AppComponent {
      ...
      genders = ['male', 'female'];  
      answer = '';
      ...
    }
        

    <form (ngSubmit)="onSubmit()" #f="ngForm">
        ...;
        <div class="form-group">
            ...
            <div class="radio" *ngFor="let gender of genders">
                <label>
                    <input type="radio" name="gender" ngModel [value]="gender" required>
                    {{ gender }}
                </label>
            </div>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
    </form> 
        

    import { Component, ViewChild } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      ...
    })
    export class AppComponent {
      ...
      user = {
        username: '',
        mail: '',
        secretQuestion: '',
        answer: '',
        gender: ''
      }
      submitted = false;
      ...
      onSubmit() {
        this.submitted = true;
        this.user.username = this.signupForm.value.userData.username;
        this.user.mail = this.signupForm.value.userData.email;
        this.user.secretQuestion = this.signupForm.value.secret;
        this.user.answer = this.signupForm.value.questionAnswer;
        this.user.gender = this.signupForm.value.gender;
      }
    }    
        

      onSubmit() {
        this.submitted = true;
        ...
        this.user.gender = this.signupForm.value.gender;

        this.signupForm.reset();
      }