Can´t call Firestore in Function-CodePudding

I want to add Data to Firstore from Angular. I have initialized the Firestore Object in the Constructor.

constructor(angularFirestore: AngularFirestore){}

If I call this code inside the Constructor, it works for me.

  angularFirestore.collection("contactform").add({
    name: "test", message: "markb", subject: "test", email: "test"
  })

Now I want to call the function from my html, every time I clicked on the submit button.

 <form (submit)="addData()">

                <div >
                    <label  id="nameLabel" for="name"></label>
                    <input type="text"  id="name" name="name" placeholder="Your name" tabindex="1">
                </div>

                <div >
                    <label  id="emailLabel" for="email"></label>
                    <input type="email"  id="email" name="email" placeholder="Your Email" tabindex="2">
                </div>

                <div >
                    <label  id="subjectLabel" for="sublect"></label>
                    <input type="text"  id="subject" name="subject" placeholder="Subject" tabindex="3">
                </div>

                <div >
                    <label  id="messageLabel" for="message"></label>
                    <textarea rows="6" cols="60" name="message"  id="message" placeholder="Your message" tabindex="4"></textarea>                                 
                </div>

                <div >
                    <button type="submit"  >Send Message</button>
                </div>

            </form>

The function will be called, but no data is in the database. How can I fix this??

angularFirestore: AngularFirestore | any

public addData(){
  
  this.angularFirestore.collection("contactform").add({
    name: "test", message: "markb", subject: "test", email: "test"
  })
  
}

I have to declaire the angularFirestore there a second time, because otherwise i can´t call it. Thank you for any help and merry christmas!!

I eppected it will add the data to the database

CodePudding user response：

The form and form name makes problems in Angular. In PHP it is essential but here not.

My HTML look like this:

<div >
                <label  id="nameLabel" for="name"></label>
                <input type="text"  id="name"  placeholder="Your name" tabindex="1">
            </div>

            <div >
                <label  id="emailLabel" for="email"></label>
                <input type="email"  id="email"  placeholder="Your Email" tabindex="2">
            </div>

            <div >
                <label  id="subjectLabel" for="sublect"></label>
                <input type="text"  id="subject"  placeholder="Subject" tabindex="3">
            </div>

            <div >
                <label  id="messageLabel" for="message"></label>
                <textarea rows="6" cols="60"   id="message" placeholder="Your message" tabindex="4"></textarea>      

            </div>

            <div >
                <button  (click)="createData()">click me</button>
            </div> <div>

The Typescript looks like this:

    constructor(private firestore: AngularFirestore){

}

public createData(){ 
  console.log("called")
  return new Promise<any>((resolve, reject) => { 
     this.firestore
         .collection("contactform")
         .add(
          {
            name: "555", message: "mark", subject: "test", email: "test"
          }
         )
         .then(
             res => {}, 
             err => reject(err)
         )
  }
)}