FileUpload Mean Stack – Part 1

package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4401 -o",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.11",
    "@angular/common": "~8.2.11",
    "@angular/compiler": "~8.2.11",
    "@angular/core": "~8.2.11",
    "@angular/forms": "~8.2.11",
    "@angular/platform-browser": "~8.2.11",
    "@angular/platform-browser-dynamic": "~8.2.11",
    "@angular/router": "~8.2.11",
    "bootstrap": "^3.4.1",
    "ngx-bootstrap": "^5.5.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.12",
    "@angular/cli": "~8.3.12",
    "@angular/compiler-cli": "~8.2.11",
    "@angular/language-service": "~8.2.11",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

angular.json

"options": {
            "outputPath": "dist/Client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.css"
            ],
            "scripts": []
          },

app.module.ts

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

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateuserComponent } from './CreateUser/createuser.component';

import { UserService} from './CreateUser/user.service'

@NgModule({
  declarations: [
    AppComponent,
    CreateuserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BsDatepickerModule.forRoot(),
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="container">
  <router-outlet></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Client';
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CreateuserComponent } from './CreateUser/createuser.component';
const routes: Routes = [
  {path:"createuser", component: CreateuserComponent},
  {path:"**", redirectTo:"/createuser", pathMatch:"full"}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

user.model.ts

export class User {
    name: string;
    sex: string;
    email: string;
    dateOfBirth: Date;
    age: number;
    country: string;
    code: string;
}

country.model.ts

export class Country{
    code: number;
    name : string;
}

user.service.ts

import { Injectable } from '@angular/core';
import { User } from '../models/user.model';

@Injectable()
export class UserService {
    private listUsers: User[] = [];
    
    save(item: User): void{
      this.listUsers.push(item);

    }
}

createuser.component.ts

import { Component, OnInit } from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

import { User } from '../models/User.model';
import { Country } from '../models/country.model';
import { UserService } from './user.service';

@Component({
  selector: 'app-createuser',
  templateUrl: './createuser.component.html',
  styleUrls: ['./createuser.component.css']
})
export class CreateuserComponent implements OnInit {

  sex: any = 'male';
  public selectionModel: string = '';
  datePickerConfig: Partial;
  previewPhoto : boolean = false;
  //dateOfBirth: Date = new Date(2018, 0, 30);
  //department = 2;

  fullnamePattern = "^[a-zA-Z]{5}$";
  emailPattern = "^[a-zA-Z0-9_.+-]+\@((gmail|hotmail)).com$";

  countrys: Array = [
    { code: 1, name: 'India' },
    { code: 2, name: 'USA' },
    { code: 3, name: 'UK' },
    { code: 4, name: 'Dubai' }
  ];

  User: User = {
    name: null,
    sex: null,
    email: null,
    dateOfBirth: null,
    age: null,
    country: null,
    code: null
  }

  constructor(private _Userservice: UserService) {
    this.datePickerConfig = Object.assign({},
      {
        containerClass: 'theme-dark-blue',
        // showWeekNumbers: true,
        // minDate: new Date(2018, 0, 1),
        // maxDate: new Date(2018, 11, 31),
        dateInputFormat: 'DD/MM/YYYY'
      });
  }

  ngOnInit() {
  }

  saveUser(empForm){
    console.log("User Form Value : ", empForm);
    this._Userservice.save(empForm);
    //console.log("User Form Value : ", empForm)
  }
  togglePhotoPreview(){
    this.previewPhoto = !this.previewPhoto;
  }
  onValueChange(event:any){
    console.log('event : ', event);
    console.log('Date : ', this.User.dateOfBirth);
  }

  showValueInCode(countryCode:any, event:any){
    console.log('Selected Country : ', countryCode);
    this.User.code = countryCode;
    // switch (country) {
    //   case 0:
    //       this.User.code = country;
    //       this.User.country="India"
    //       break;
    //   case 1:
    //     this.User.code = country;
    //     this.User.country="US"
    //       break;
    //   case 2:
    //   this.User.code = country;
    //   this.User.country="UK"
    //     break;
    //   case 3:
    //   this.User.code = country;
    //   this.User.country="Dubai"
    //     break;
    // }       
  }
}

createuser.component.html

<!-- This Form which includes Angular Auto-generated form model-->
<form #UserForm="ngForm" (ngSubmit)="saveUser(User)">
    <!--(ngSubmit)="saveEmployee(UserForm)" : Angular Auto generated model-->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Create User</h3>
        </div>
        <div class="panel-body">

            <div class="form-group" [class.has-error]="name.invalid && name.touched" [class.has-success]="name.valid">
                <label for="fullName" class="control-label">Full Name</label>
                <!--local template variable (called as template reference variable) : #fullNameControl-->
                <input id="fullName" type="text" class="form-control" name="fullName" [(ngModel)]="User.name" required
                    [pattern]="fullnamePattern" maxlength="5" #name="ngModel">
                <span class="help-block" *ngIf="name.invalid && name.touched && !name.errors?.pattern ">Full Name is
                    required</span>
                <span class="help-block" *ngIf="name.invalid && name.touched && name.errors?.pattern">Full Name Not
                    Valid. Alphapets only allowed, it should be maximum 5 characters</span>
            </div>

            <div class="form-group" [class.has-error]="sex.invalid && sex.touched && sex.errors?.required">
                <label class="control-label">Sex</label>
                <div class="form-control">
                    <label class="radio-inline">
                        <input type="radio" required #sex="ngModel" name="sex" value="male" [(ngModel)]="User.sex"> Male
                    </label>
                    <label class="radio-inline">
                        <input type="radio" required #sex="ngModel" name="sex" value="female" [(ngModel)]="User.sex">
                        Female
                    </label>
                </div>
                <span class="help-block" *ngIf="sex.invalid && sex.touched && sex.errors?.required">
                    Gender is required
                </span>
            </div>
            <div class="form-group" [class.has-error]="email.invalid && email.touched ">
                <label for="email" class="control-label">Email</label>
                <input required [pattern]="emailPattern" id="email" type="text" class="form-control" name="email"
                    [(ngModel)]="User.email" #email="ngModel">
                <span class="help-block"
                    *ngIf="email.invalid && email.touched && email.errors?.required && !email.errors?.pattern "> Email
                    is required </span>
                <span class="help-block" *ngIf="email.invalid && email.touched && email.errors?.pattern "> Email is
                    Invalid </span>
            </div>
            
            <div class="row">
                <div class="form-group col-md-4" [class.has-error]="dateOfBirth.invalid && dateOfBirth.touched ">
                    <label for="dateOfBirth">Date Of Birth</label>
                    <input type="text" name="dateOfBirth" required [(ngModel)]="User.dateOfBirth" class="form-control"
                        bsDatepicker [bsConfig]="datePickerConfig" (bsValueChange)="onValueChange($event)" #dateOfBirth="ngModel"  >
                    <span class="help-block" *ngIf="dateOfBirth.invalid && dateOfBirth.touched && dateOfBirth.errors?.required "> Date of Birth is required </span>

                    <span>Error :{{dateOfBirth.errors | json}}</span>
                </div>
            </div>
            <div class="form-group">
                <label for="age">Age</label>
                <input type="text" id="age" disabled name="age" [(ngModel)]="User.age" class="form-control" #age="ngModel">
            </div>
            <div class="form-group" >
                <label for="country" class="control-label">Country</label>
                <select id="country"  name="country" [(ngModel)]="User.country"
                    (ngModelChange)="showValueInCode(User.country, $event)" #country="ngModel"
                    class="form-control">
                    <option value='0'>Select Country</option>
                    <option *ngFor="let country of countrys" [value]="country.code"> {{country.name}}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="code">Country Code</label>
                <input type="text"  name="code" [(ngModel)]="User.code" class="form-control" #code="ngModel">
            </div>
            <div class="form-group">
                <button type="button" (click)="togglePhotoPreview()" class="btn btn-primary">
                    {{previewPhoto?"Hide " : "Show "}} Photo
                </button>
            </div>            
        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" type="submit" [disabled]="UserForm.invalid">Save</button>
        </div>
    </div>
</form>
<div>
    UserForm : {{UserForm.value | json}}
</div>
<div>
    User : {{User | json}}
</div>

Date Calculation

angular-2-4-minlength-and-maxlength-validation-example#Template-driven