import { Component , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , FormControl } from '@angular/forms' ; import { ActivatedRoute , Router } from '@angular/router' ; import { Article , ArticlesService } from '../core' ; @ Component ( { selector : 'app-editor-page' , templateUrl : './editor.component.html' } ) export class EditorComponent implements OnInit { article : Article = { } as Article ; articleForm : FormGroup ; tagField = new FormControl ( ) ; errors : Object = { } ; isSubmitting = false ; constructor ( private articlesService , private route , private router , private fb ) { this . articleForm = this . fb . group ( { title : '' , description : '' , body : '' } ) ; this . article . tagList = [ ] ; } ngOnInit ( ) { this . route . data . subscribe ( ( data ) => { if ( data . article ) { this . article = data . article ; this . articleForm . patchValue ( data . article ) ; } } ) ; } addTag ( ) { const tag = this . tagField . value ; if ( this . article . tagList . indexOf ( tag ) < 0 ) { this . article . tagList . push ( tag ) ; } this . tagField . reset ( '' ) ; } removeTag ( tagName ) { this . article . tagList = this . article . tagList . filter ( tag => tag !== tagName ) ; } submitForm ( ) { this . isSubmitting = true ; this . updateArticle ( this . articleForm . value ) ; this . articlesService . save ( this . article ) . subscribe ( article => this . router . navigateByUrl ( '/article/' + article . slug ) , err => { this . errors = err ; this . isSubmitting = false ; } ) ; } updateArticle ( values ) { Object . assign ( this . article , values ) ; } }