title: Angular Firebase Edit Object using Reactive Form
body: <p>I am trying to create this edit form using the Reactive form approach. I'm trying to bind the value of the object using the FormControl but I can't get the true value. I only get null.</p>
  
  <p>On my service I have a method that will return a specific object, on my edit component I initialize the object calling the service method (getSpecificNews) and passing the ID. But it doesn't work.</p>
  
  <p>This is my very first Angular and Firebase project. Can anybody help?</p>
  
  <p><strong>news.service.ts</strong></p>
  
  <pre><code>import { map } from 'rxjs/operators';
  import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
  import { News } from './news.model';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class NewsService {
      news: AngularFireList&lt;News[]&gt;;
      constructor(private db: AngularFireDatabase) {
      }
      getNews() {
          this.news = this.db.list('news');
          return this.news.valueChanges();
      }
  
      getSingleNews(id: string) {
          return this.db.object('news/' + id);
      }
  
      updateNews(news: News) {
          return this.db.database.ref().update(news);
      }
  
      deleteItem(id: string) {
          this.getSingleNews(id).remove();
      }
  }
  </code></pre>
  
  <p><strong>edit.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
  import { FormControl, FormGroup } from '@angular/forms';
  import { NewsService } from '../news.service';
  import { News } from '../news.model';
  import { AngularFireDatabase } from '@angular/fire/database';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  
  @Component({
    selector: 'app-news-edit',
    templateUrl: './edit.component.html',
    styleUrls: ['./edit.component.css']
  })
  export class NewsEditComponent implements OnInit {
    @ViewChild('closeBtn') closeBtn: ElementRef;
    editMode = false;
    id;
    news: any;
    newsForm: FormGroup;
    constructor(private newsService: NewsService, private db: AngularFireDatabase, private router: Router, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.getRouteID();
      this.news = this.newsService.getSingleNews(this.id).snapshotChanges().subscribe(
        action =&gt; {
          this.news = action.payload.val();
        }
      );
      console.log(this.news.title);
      this.initForm();
    }
  
    private initForm() {
      let theTitle = '';
      let theSubtitle = '';
      let theArticle = '';
      let thePicture = '';
  
      if (this.editMode) {
        theTitle = this.news.title;
        theSubtitle = this.news.subtitle;
        theArticle = this.news.article;
        thePicture = this.news.picture;
      }
  
      this.newsForm = new FormGroup({
        'title': new FormControl(theTitle),
        'subtitle': new FormControl(theSubtitle),
        'article': new FormControl(theArticle),
        'picture': new FormControl(thePicture)
      });
    }
  
    getRouteID() {
      this.route.params.subscribe(
        (param: Params) =&gt; {
          this.id = param['id'];
          this.editMode = param['id'] != null;
        }
      );
    }
  
    onCreateNews() {
      const id = '';
      const title = this.newsForm.value.title;
      const subtitle = this.newsForm.value.subtitle;
      const article = this.newsForm.value.article;
      const picture = this.newsForm.value.picture;
  
      if (this.editMode) {
        const iD = this.id;
        this.newsService.getSingleNews(this.id).update({title, subtitle, article, picture})
          .then(() =&gt; console.log(id, title, subtitle, picture, article))
          .catch((e) =&gt; console.log(e));
      } else {
        console.log('entou no else do create news ');
        const newNew = new News(id, title, subtitle, picture, article);
        this.db.database.ref('news/' + newNew.getID()).set(newNew,
          (e) =&gt; {
            if (e) {
              console.log(e);
            } else {
              console.log('Data saved');
            }
          });
      }
      this.newsForm.reset();
      this.router.navigate(['/news']);
      this.closeModal();
    }
  
    closeModal() {
      this.closeBtn.nativeElement.click();
    }
  
  }
  </code></pre>
  
  <p><strong>edit.component.html</strong></p>
  
  <pre><code>&lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
    &lt;form (ngSubmit)="onCreateNews()" [formGroup]="newsForm"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalCenterTitle" *ngIf="!editMode"&gt;Adicionar Noticia&lt;/h5&gt;
          &lt;h5 class="modal-title" id="exampleModalCenterTitle" *ngIf="editMode"&gt;Editar Noticia&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" #closeBtn aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="container"&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col form-group"&gt;
                &lt;label for="newsTitle"&gt;Titulo&lt;/label&gt;
                &lt;input type="text" class="form-control" name="title" id="title" formControlName="title"&gt;
                &lt;p&gt;Text: {{ news.title }}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
                &lt;div class="col form-group"&gt;
                  &lt;label for="subtitle"&gt;Sub Titulo&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="subtitle" id="subtitle" formControlName="subtitle"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col form-group"&gt;
                &lt;label for="article"&gt;Noticia&lt;/label&gt;
                &lt;textarea name="article" id="article" cols="30" rows="10" class="form-control" formControlName="article"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col form-group"&gt;
                &lt;label for="picture"&gt;Picture&lt;/label&gt;
                &lt;input type="text" class="form-control" name="picture" id="picture" formControlName="picture"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="submit" class="btn orange-btn" *ngIf="editMode"&gt;Salvar Mudancas&lt;/button&gt;
          &lt;button type="submit" class="btn orange-btn" *ngIf="!editMode"&gt;Adicionar Noticia&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>news.model.ts</strong></p>
  
  <pre><code>export class News {
      private id: string;
      private title: string;
      private subtitle: string;
      private picture: string;
      private article: string;
  
      constructor(id: string, title: string, subtitle: string, picture: string, article: string) {
          this.id = this.setID();
          this.title = this.setTitle(title);
          this.subtitle = this.setSubtitle(subtitle);
          this.picture = this.setPicture(picture);
          this.article = this.setArticle(article);
      }
  
      private setID() {
          function s4() {
              return Math.floor((1 + Math.random()) * 0x10000)
                  .toString(16)
                  .substring(1);
          }
          return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
      }
  
      getID() {
          return this.id;
      }
  
      setTitle(title: string) {
          return this.title = title;
      }
  
      getTitle() {
          return this.title;
      }
  
      setSubtitle(sub: string) {
          return this.subtitle = sub;
      }
  
      getSubtitle() {
          return this.subtitle;
      }
  
      setPicture(pic: string) {
          return this.picture = pic;
      }
  
      getPicture() {
          return this.picture;
      }
  
      setArticle(art: string) {
          return this.article = art;
      }
  
      getArticle() {
          return this.article;
      }
  }
  </code></pre>