Objective

Add a Form with the following Inputs (and Validators)
1) Mail address (should not be empty and should be an email address)
2) A Dropdown which allows the user to select from three different Subscriptions ("Basic", "Advanced", "Pro")
Set "Advanced" as Default
3) A Password field (should not be empty)
4) A Submit Button
Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it's invalid.
Upon submitting the form, you should simply print the Value of the Form to the Console.
Optionally, display it in your template.

Code

• app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

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

• app-component.ts

import { Component } from '@angular/core';
import { Form } from '@angular/forms';
import { UserDetails } from './user-details';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  subOptions = ['Basic', 'Advanced', 'Pro'];
  templateForm = new UserDetails('[email protected]', this.subOptions[1], 'password');
  submitted = false;

  onSubmit(templateForm) {
    this.submitted = true;
    console.log(templateForm.value);
  }
}

• app-component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <!-- Add a Form with the following Inputs (and Validators)
           1) Mail address (should not be empty and should be an email address)
           2) A Dropdown which allows the user to select from three different Subscriptions ("Basic", "Advanced", "Pro")
              Set "Advanced" as Default
           3) A Password field (should not be empty)
           4) A Submit Button

           Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it's invalid.

           Upon submitting the form, you should simply print the Value of the Form to the Console.
           Optionally, display it in your template.
      -->
      <form #templateDrivenForm="ngForm" (ngSubmit)="onSubmit(templateDrivenForm)" novalidate> <!--no validate to disable browser validation which interfere with angular validation-->
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" id="email" class="form-control" required email name="email" 
        #emailId="ngModel" ngModel>
        <div class="alert alert-danger" role="alert" *ngIf="!emailId.valid && (emailId.dirty || emailId.touched)">
          <div class="alert alert-danger" role="alert" *ngIf="emailId.errors.required">
            Email is required
          </div>
          <div class="alert alert-danger" role="alert" *ngIf="emailId.errors.email">
            Email is not valid, please enter a valid email
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" class="form-control" required name="password" 
        #password="ngModel" ngModel minlength="6">
        <div class="alert alert-danger" role="alert" *ngIf="!password.valid && (password.dirty || password.touched)">
          <div class="alert alert-danger" role="alert" *ngIf="password.errors.required">
            Password is required
          </div>
          <div class="alert alert-danger" role="alert" *ngIf="password.errors.minlength">
            Password is having a minimum length of {{ password.errors.minlength.requiredLength }}
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="user">Subscriber options</label>
        <select name="user" id="user" class="form-control" required #userOption="ngModel" [(ngModel)]="templateForm.subOption">
          <option *ngFor="let option of subOptions" [value]="option"> {{ option }}</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary" [disabled]="!templateDrivenForm.valid">Submit the form</button>
      </form>
      <br>  
      <div class="container-fluid">
        <pre>Value: {{ templateDrivenForm.value | json}}</pre>
        <pre>Valid: {{ templateDrivenForm.valid }}</pre>
        <pre>Touched: {{ templateDrivenForm.touched }}</pre>
        <pre>Submitted: {{ templateDrivenForm.submitted }}</pre>
      </div>
      <div class="container-fluid">
        <pre>Email Value: {{ emailId.value | json}}</pre>
        <pre>Email Valid: {{ emailId.valid }}</pre>
        <pre>Email Touched: {{ emailId.touched }}</pre>
      </div>
      <div class="container-fluid">
        <pre>Password Value: {{ password.value | json}}</pre>
        <pre>Password Valid: {{ password.valid }}</pre>
        <pre>Password Touched: {{ password.touched }}</pre>
      </div>
      <div class="container-fluid">
        <pre>User option Value: {{ userOption.value | json}}</pre>
        <pre>User option Valid: {{ userOption.valid }}</pre>
        <pre>User option Touched: {{ userOption.touched }}</pre>
      </div>
    </div>
  </div>
</div>

• user-details.ts

export class UserDetails {
    constructor(
        public mailId: string,
        public subOption: string, 
        public password: string
    ){}
}