import { Component , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { Router , ActivatedRoute } from '@angular/router' ; import { IMovie } from '../movie' ; import { MovieService } from '../movie.service' ; import { NumberValidators } from '../../shared/number.validator' ; @ Component ( { templateUrl : './movie-edit-reactive.component.html' } ) export class MovieEditReactiveComponent implements OnInit { pageTitle = 'Edit Movie' ; editForm : FormGroup ; formError : { [ id ] : string ; } ; private validationMessages : { [ id ] : { [ id ] : string ; } ; } ; movie : IMovie ; errorMessage : string ; constructor ( private fb , private movieService , private router , private route ) { this . formError = { title : '' , director : '' , starRating : '' , description : '' } ; this . validationMessages = { title : { required : 'Movie title is required' , minlength : 'Movie title must be at least three characters.' , maxlength : 'Movie title cannot exceed 50 characters.' } , director : { required : 'Director is required' , minlength : 'Director must be at least 5 characters.' , maxlength : 'Director cannot exceed 50 characters.' } , starRating : { range : 'Rate the movie between 1 (lowest) and 5 (highest).' } } ; } ngOnInit ( ) { this . route . params . subscribe ( params => { const paramName = 'id' ; const id = + params [ paramName ] ; 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 (Reactive)' ; } else { this . pageTitle = `Edit Movie (Reactive): ${ this . movie . title }` ; } this . editForm = this . fb . group ( { title : [ this . movie . title , [ Validators . required , Validators . minLength ( 3 ) , Validators . maxLength ( 50 ) ] ] , director : [ this . movie . director , [ Validators . required , Validators . minLength ( 5 ) , Validators . maxLength ( 50 ) ] ] , starRating : [ this . movie . starRating , NumberValidators . range ( 1 , 5 ) ] , description : [ this . movie . description ] } ) ; this . editForm . valueChanges . subscribe ( data => this . onValueChanged ( data ) ) ; } onValueChanged ( data ) { for ( const field in this . formError ) { if ( this . formError . hasOwnProperty ( field ) ) { const hasError = this . editForm . controls [ field ] . dirty && ! this . editForm . controls [ field ] . valid ; this . formError [ field ] = '' ; if ( hasError ) { for ( const key in this . editForm . controls [ field ] . errors ) { if ( this . editForm . controls [ field ] . errors . hasOwnProperty ( key ) ) { this . formError [ field ] += this . validationMessages [ field ] [ key ] + ' ' ; } } } } } } saveMovie ( ) { console . log ( this . editForm ) ; if ( this . editForm . dirty && this . editForm . valid ) { this . movie = this . editForm . value ; alert ( `Movie: ${ JSON . stringify ( this . editForm . value ) }` ) ; } } }