Data not publishing to firebase

Question

I am trying to push data to firebase, but it is not showing in the firebase console. Also installed all npms. I am attaching all the associated files.

Service file:

import { Injectable } from '@angular/core';
import {FormControl,FormGroup, Validators} from '@angular/forms';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
@Injectable()
export class QuestionService {


  constructor(private firebase: AngularFireDatabase) { }
  questionList:AngularFireList<any>;


  form = new FormGroup({
    $key: new FormControl(null),
    newQuestion: new FormControl('', Validators.required)

  });

  getQuestions(){
    this.questionList = this.firebase.list('questions');
    return this.questionList.snapshotChanges();
  }

  insertQuestion(question){
    this.questionList.push({
      questionName: question.questionName
    });
  }

}`

HTML:

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <button routerLink="/" mat-flat-button color="primary" id="Admin"> Questionnaire App</button>

      <span class="example-spacer"></span>
    </mat-toolbar-row>
</mat-toolbar>

<br>
<br>


<div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.questionService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group">
          <input formControlName="newQuestion" class="form-control" type="text" placeholder="Add Question">
      </div>
      <br>
      <div class="form-group">
        <input type="submit" class="btn btn-success" id="submit" value="Submit">
      </div>
    </form>






  </div>
  <div class="col-md-6">
      <!-- <ul class="list-group " *ngFor="let question of questions">
          <li class="list-group-item">{{this.question}}<button type="button" class="btn btn-danger">Delete</button><button type="button" class="btn btn-primary">Edit</button></li>
        </ul> -->
  </div>

</div>

Component:

import {Component, OnInit } from '@angular/core';
import {FormBuilder,FormGroup} from '@angular/forms';
import {MatToolbarModule} from '@angular/material/toolbar';
import {QuestionService} from '../shared/question.service';
import {AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs-compat';
import { map } from 'rxjs-compat/operators';
@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
  constructor(private questionService: QuestionService){}
  submitted:boolean;
  formControls=this.questionService.form.controls;

  ngOnInit(){}

  onSubmit(){
    this.submitted = true;
    if(this.questionService.form.valid){
      if(this.questionService.form.get('$key').value==null)
        this.questionService.insertQuestion(this.questionService.form.value);
      this.submitted=false;
    }
  }
}

Note: I have added firebase config to environment.ts. How can I solve this? Console not throwing any errors.Is there something I am missing?

Answer 1

I've tried your code and the console IS trowing errors.

The first one is as mentioned by @PatricioVargas that this.questionList is undefined:

ERROR TypeError: Cannot read property 'push' of undefined

The second one is that in the push function question.questionName is undefined:

ERROR Error: Reference.push failed: first argument contains undefined in property 'questions.questionName'

You're properties in the formgroup are named $key and newQuestion not questionName. In your service:

insertQuestion(question) {
    this.questionList = this.firebase.list('questions');
    this.questionList.push({
        questionName: question.newQuestion
    });
}