<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="./lib/main.ts"></script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { BookMovieComponent } from './bookMovie/bookMovie.component';
@Component({
selector: 'my-app',
template: `
<div>
<p>Angular : Template Driven Form</p>
<book-movie></book-movie>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
@NgModule({
imports: [BrowserModule, ReactiveFormsModule ],
declarations: [App, BookMovieComponent],
bootstrap: [App],
})
export class AppModule {}
// Shim the environment
import 'core-js/client/shim';
// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';
//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';
import './style.css';
platformBrowserDynamic().bootstrapModule(AppModule);
h1,
p {
font-family: sans-serif;
}
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
//import { ShowError } from './showError.component';
import { Movie } from '../models/movie';
@Component({
selector: 'book-movie',
template: `<div class="container">
<div *ngIf="!submitted">
<h1>Book a movie</h1>
<form (ngSubmit)="onSubmit(bookMovieForm)" [formGroup]="bookMovieForm">
<div class="form-group">
<label for="uName">User Name</label>
<input type="text" class="form-control" formControlName="uName">
<div class="alert alert-danger" [hidden]="bookMovieForm.controls.uName.valid">User name is required</div>
</div>
<div class="form-group">
<label for="name">Choose a movie</label>
<select class="form-control" formControlName="name">
<option *ngFor="let m of movies" [value]="m">{{ m }}</option>
</select>
</div>
<div class="form-group">
<label for="cinemaHall">Choose cinema hall</label>
<select class="form-control" formControlName="cinemaHall">
<option *ngFor="let c of cinemaHalls" [value]="c">{{ c }}</option>
</select>
</div>
<div class="form-group">
<label for="timing">Movie Timing</label>
<select class="form-control" formControlName="timing">
<option *ngFor="let mt of movieTimings" [value]="mt">{{ mt }}</option>
</select>
</div>
<button type="submit" class="btn btn-default" [disabled]="!bookMovieForm.valid">Submit</button>
</form>
</div>
<div *ngIf="submitted">
<h2>Here is your e-ticket:</h2>
<div class="row">
<div class="col-4">User Name : </div>
<div class="col-8 pull-left">{{ submittedModel.uName }}</div>
</div>
<div class="row">
<div class="col-4">Cinema Hall : </div>
<div class="col-8 pull-left">{{ submittedModel.cinemaHall }}</div>
</div>
<div class="row">
<div class="col-4">Movie Name : </div>
<div class="col-8 pull-left">{{ submittedModel.name }}</div>
</div>
<div class="row">
<div class="col-4">Movie Timing : </div>
<div class="col-8 pull-left">{{ submittedModel.timing }}</div>
</div>
<br />
<button class="btn btn-default" (click)="submitted=false">Edit</button>
</div>
</div>`
})
export class BookMovieComponent implements OnInit {
bookMovieForm: FormGroup;
model: Movie;
submittedModel: Movie;
uName: string;
movies: string[];
cinemaHalls: string[];
movieTimings: string[];
submitted: boolean = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.uName = "";
this.model = new Movie("Titanic", "Classic Cinemas", "21:30");
this.movies = ["Titanic", "Ice Age 3", "Jumanji"];
this.cinemaHalls = ["Classic Cinemas", "NY Studios", "Mega Screens"];
this.movieTimings = ["10:10", "13:40", "5:25", "21:30"];
this.bookMovieForm = this.formBuilder.group({
uName: [this.uName, Validators.required],
name: [this.model.name, Validators.required],
cinemaHall: [this.model.cinemaHall , Validators.required],
timing: [this.model.timing, Validators.required]
});
}
onSubmit({ value, valid }: { value: Movie, valid: boolean }) {
this.submitted = true;
this.submittedModel = value;
}
}
export class Movie {
constructor(
public name: string,
public cinemaHall: string,
public timing: string) {
}
}
{
"name": "@plnkr/starter-angular",
"version": "1.0.3",
"description": "Angular starter template",
"dependencies": {
"@angular/common": "^7.0.0-rc.0",
"@angular/compiler": "^7.0.0-rc.0",
"@angular/core": "^7.0.0-rc.0",
"@angular/platform-browser": "^7.0.0-rc.0",
"@angular/platform-browser-dynamic": "^7.0.0-rc.0",
"@angular/forms": "^7.0.0-rc.0",
"core-js": "^2.5.5",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
"main": "./lib/main.ts",
"plnkr": {
"runtime": "system",
"useHotReload": true
}
}
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}