Exporting firebase data and set it as default input in template driven form

Question

I am creating an app using angular 4.0.2, angularfire2, and firebase, off course. What the problem is I am not able to use the data from angularfire2 and set it as default input value of an input used in model-driven or reactive form. Here is my code for add-invoice.component.ts

ngOnInit(){
  const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {
    const names = [];
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();
      names.push(childSnapshot.val());
    });
    this.patchValues(names);
  });

  this.invoiceForm = this.fb.group({
    invoiceno: '',
    itemRows: this.fb.array([this.initItemRows()])
  });
}

patchValues(names){
  this.invoiceForm.patchValue({
    invoiceno: names.invoiceno
  });
  console.log(names);
}

Array being Shown up in console.

Here is my form i.e. add-invoice.component.html

<div class="form-group col-md-2">
<label>Invoice No.</label>
<input formControlName="invoiceno" class="form-control">

@AJT_82 Do you need the output over there in console? If so, I can provide. It's just an Array I can send you the image. If you really need. — Climb Tree
– Climb Tree, Commented Apr 20, 2017 at 19:28
This is an async issue, if this would be the only problem, it would be a duplicate of this: stackoverflow.com/questions/43055706/… :) — AVJT82
– AVJT82, Commented Apr 20, 2017 at 19:30
Sorry @AJT_82 I am very new to angular 4 and typescript. Can you please explain me in detail, as you did in my previous question? Please. I am not getting anything going on in the question you asked me to view. — Climb Tree
– Climb Tree, Commented Apr 20, 2017 at 19:32
In short this just means that anything you want to do with your data that you receive, you have to do inside the callback (subscribe). Since you want to set the formvalues with the data you receive, you can look at this: stackoverflow.com/questions/43266967/… In that answer we call patchForm inside subscribe. So your setup would be pretty much the same, just change variable names :) — AVJT82
– AVJT82, Commented Apr 20, 2017 at 19:39
@AJT_82 In my case the data is not being provided. The console.log(name) returns undefined. The data is under ZoneAwarePromise. This is the problem. — Climb Tree
– Climb Tree, Commented Apr 20, 2017 at 19:42

Community · Accepted Answer · 2017-05-23 10:31:09Z

The reason for that this.patchValues(names); gave you error

Cannot read property of patchValues 'undefined'

was because you are using function in your code, instead of fat-arrow-syntax. With fat-arrow you keep the context of this.

So instead of this piece of code (from your unedited post):

const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(function(snapshot) {
  const names = [];
  snapshot.forEach(function(childSnapshot) {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    names.push(childSnapshot.val());
  });
  name.push(names);
  console.log(name); // Here is the correct output I need below
});

You need to use fat-arrow syntax and then this will not be undefined:

  const datafetch = firebase.database().ref().child('/invoices').orderByKey().limitToLast(1).once('value').then(snapshot => {
    const names = [];
    snapshot.forEach(childSnapshot => {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();
      names.push(childSnapshot.val());
    });
    this.patchValues(names);
  });

Collectives™ on Stack Overflow

Exporting firebase data and set it as default input in template driven form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related