Recently delving into the world of angular and firebase, I've been working on setting up a contact form for my portfolio website. However, I'm facing some challenges in implementing this. Here's what I have so far based on a guide I've been following:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProjectsComponent } from './projects/projects.component';
import { BlogsComponent } from './blogs/blogs.component';
import { ContactComponent } from './contact/contact.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ResumeComponent } from './resume/resume.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ProjectsComponent,
BlogsComponent,
ContactComponent,
ResumeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
RouterModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }
contact.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class ContactComponent {
form: FormGroup;
constructor(private fb: FormBuilder, private af: AngularFirestore) {
this.createForm();
}
createForm() {
this.form = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
message: ['', Validators.required],
});
}
onSubmit() {
const {name, email, message} = this.form.value;
const date = Date();
const html = `
<div>From: ${name}</div>
<div>Email: <a href="mailto:${email}">${email}</a></div>
<div>Date: ${date}</div>
<div>Message: ${message}</div>
`;
let formRequest = { name, email, message, date, html };
this.af.list('/messages').set(formRequest);
this.form.reset();
}
}
Encountering an error where it says,
Property 'list' does not exist on type 'AngularFirestore'.
I'm struggling to resolve this issue. Additionally, I'm unsure about how to set up the firebase database. Should I include collections like name, email, etc.? Any pointers would be greatly appreciated -- referencing this link: https://medium.com/@markgoho/create-a-contact-form-in-angular-using-cloud-functions-for-firebase-5e390bdf5600
Thank you!