import { Component , OnInit } from '@angular/core' ; import { NgForm } from '@angular/forms' ; import { Router , ActivatedRoute } from '@angular/router' ; import { IMovie } from '../movie' ; import { MovieService } from '../movie.service' ; import { RangeValidatorDirective } from '../../shared/range.directive' ; @ Component ( { templateUrl : './movie-edit.component.html' } ) export class MovieEditComponent implements OnInit { pageTitle = 'Edit Movie' ; movie : IMovie ; errorMessage : string ; constructor ( private movieService , private router , private route ) { } ngOnInit ( ) { this . route . paramMap . subscribe ( params => { const id = + params . get ( 'id' ) ; this . getMovie ( id ) ; } ) ; } getMovie ( id ) { this . movieService . getMovie ( id ) . subscribe ( { next : movie => this . onMovieRetrieved ( movie ) , error : err => this . errorMessage = err } ) ; } onMovieRetrieved ( movie ) { this . movie = movie ; if ( this . movie . id === 0 ) { this . pageTitle = 'Add Movie (Template-driven)' ; } else { this . pageTitle = `Edit Movie (Template-driven): ${ this . movie . title }` ; } } saveMovie ( editForm ) { console . log ( editForm ) ; if ( editForm . dirty && editForm . valid ) { alert ( `Movie: ${ JSON . stringify ( editForm . value ) }` ) ; } this . router . navigate ( [ '/movies' ] ) ; } }