first of all, I'm learning Angular with Angular CLI, Foundation and Jquery, so I'm still novice at this theme, it works in part, i can obtain the information from my database, apply the filter to show only the contacts where they have the same category, and show all the information of the contact without any problems... but i have a error to create a new business contact to my firebase database, but when i try to submit it show this error:
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:194:6 caused by: Cannot read property 'value' of undefined
and i don't understand why this happens...
Here my code:
From the firebaseService:
import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import 'rxjs/add/operator/map';
import { Business } from '../business';
import { Category } from '../category';
@Injectable()
export class FirebaseService {
business: FirebaseListObservable<Business[]>;
categories: FirebaseListObservable<Category[]>;
constructor(private _af: AngularFire) {
}
getBusiness(categories: string = null){
if(categories != null && categories != '0'){
this.business = this._af.database.list('/business', {
query: {
orderByChild: 'category',
equalTo: categories
}
}) as FirebaseListObservable<Business[]>
}else{
this.business = this._af.database.list('/business') as FirebaseListObservable<Business[]>
}
// this.business = this._af.database.list('/business') as FirebaseListObservable<Business[]>
return this.business;
}
getCategory(){
this.categories = this._af.database.list('/categories') as FirebaseListObservable<Category[]>
return this.categories;
}
//this part it doesn't send the new contact
addBusinessContact(newbusiness){
return this.business.push(newbusiness);
}
}
and from the app.component.ts:
import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { FirebaseService } from './services/firebase.service';
import { Business } from './business';
import { Category } from './category';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [FirebaseService]
})
export class AppComponent implements OnInit {
constructor(private _firebaseService: FirebaseService) {
}
busiRes: Business[];
cateRes: Category[];
FilterBusiness: Business[];
appState: string;
activeKey: string;
ngOnInit() {
this._firebaseService.getBusiness().subscribe(busi => {
console.log(busi);
this.busiRes = busi;
});
this._firebaseService.getCategory().subscribe(cate => {
console.log(cate);
this.cateRes = cate;
});
}
changeState(state, key) {
console.log("Changing state to: " + state);
if (key) {
console.log("Changing Key: " + key);
this.activeKey = key;
}
this.appState = state;
}
filterCategory(category) {
this._firebaseService.getBusiness(category).subscribe(busi => {
console.log(busi);
this.busiRes = busi;
});
}
addBusiness(
company: string,
category: string,
years_in_business: string,
description: string,
phone: string,
email: string,
street_address: string,
state: string,
zpicode: string) {
var created_at = new Date().toString();
var newBusinessContact = {
company: company,
category: category,
years_in_business: years_in_business,
description: description,
phone: phone,
email: email,
street_address: street_address,
state: state,
zpicode: zpicode,
created_at: created_at
};
console.log(newBusinessContact);
this._firebaseService.addBusinessContact(newBusinessContact);
}
}
the app.component.html
<div class="top-bar">
<div class="row">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">BusinessContacts</li>
</ul>
</div>
<div class="top-bar-right">
</div>
</div>
</div>
<br>
<div class="row">
<div class="large-6 columns">
<button class="button" (click)="changeState('add')">Add Business</button>
</div>
<div class="large-6 columns">
<label>
Filter category
<select (change)="filterCategory(filteredCategory.value)" #filteredCategory>
<option value="0">Select</option>
<option *ngFor="let category of cateRes" value="{{category.name}}">{{category.name}}</option>
</select>
</label>
</div>
</div>
<!--in this part it helps to show/hide the extra content of the contacts,
when the user selects the contact it appears a new window to show the
information of the contact-->
<div *ngIf="appState == 'extend'">
<div class="row">
<div class="large-12 columns">
<button class="button alert" (click)="changeState('default')">Go Back</button>
</div>
</div>
<!--it show all the extra information of the contact from the database-->
<div *ngFor="let busine of busiRes">
<div *ngIf="busine.$key == activeKey">
<div class="row">
<div class="large-5 columns large-offset-1">
<h3>
{{busine.company}}
</h3>
<p>
Category: {{busine.category}}
</p>
<p>
Years in Business: {{busine.years_in_business}}
</p>
<p>
{{busine.description}}
</p>
</div>
<div class="large-5 columns large-offset-1">
<h3>
Contact Info
</h3>
<p>
Phone: {{busine.category}}
</p>
<p>
Email: {{busine.email}}
</p>
<p>
Street Address: {{busine.street_address}}
</p>
<p>
City: {{busine.city}}
</p>
<p>
State: {{busine.state}}
</p>
<p>
ZipCode: {{busine.zpicode}}
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////ERROR///////////////////////////////////////// -->
<!-- form to create a new business contact to the firebase-->
<div *ngIf="appState == 'add'">
<div class="large-12 columns">
<h3>
Add Business
</h3>
<form (submit)="addBusiness(
company.value,
category.value,
years_in_business.value,
description.value,
phone.value,
email.value,
street_address.value,
state.value,
zpicode.value
)">
<div class="row">
<div class="large-6 columns">
<label> Company
<input type="text" placeholder="Company Name" #company>
</label>
</div>
<div class="large-6 columns">
<label>
Category
<select #category>
<option value="0">Select</option>
<option *ngFor="let category of cateRes" value="{{category.name}}">{{category.name}}</option>
</select>
</label>
</div>
</div>
<!---->
<div class="row">
<div class="large-6 columns">
<label> Years in Business
<input type="text" placeholder="Years in Business" #years_in_business>
</label>
</div>
<div class="large-6 columns">
<label>
<textarea #description></textarea>
</label>
</div>
</div>
<!---->
<div class="row">
<div class="large-6 columns">
<label> Phone
<input type="text" placeholder="Company Name" #company>
</label>
</div>
<div class="large-6 columns">
<label>
Email
<input type="text" placeholder="Email" #email>
</label>
</div>
</div>
<!---->
<div class="row">
<div class="large-6 columns">
<label> Street Address
<input type="text" placeholder="Company Name" #company>
</label>
</div>
<div class="large-6 columns">
<label>
State
<input type="text" placeholder="State" #state>
</label>
</div>
</div>
<!---->
<div class="row">
<div class="large-6 columns">
<label> Street Address
<input type="text" placeholder="Zip Code" #zpicode>
</label>
</div>
</div>
</form>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" class="button" value="Submit"> <!-- error -->
</div>
</div>
</div>
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!-- /////////////////////////////////////////END ERROR///////////////////////////////////////// -->
<!--it show all the business contacts from the firebase in only company, category and phone-->
<div class="row">
<div class="large-12 columns">
<div *ngIf="busiRes">
<table>
<thead>
<tr>
<th>Company</th>
<th>Category</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let busin of busiRes">
<td>
{{busin.company}}
</td>
<td>
{{busin.category}}
</td>
<td>
{{busin.phone}}
</td>
<td>
<!-- when is clicked it shows a window to show all information of the contact -->
<button class="button" (click)="changeState('extend', busin.$key)">More</button>
<button class="button secondary">Edit</button>
<button class="button alert">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
