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>angular-2-4-minlength-and-maxlength-validation-example#Template-driven