Question

我正在尝试使用Firebase将联系人表单中的数据发送到我的数据库，并且尝试了不同的方法，但是它们都失败了。这是我的代码：

 <form (ngSubmit)="onSubmit()">
<div class="form-group">
  <label for="exampleFormControlInput1">First & Last Name</label>
  <input name="name" required [(ngModel)]="nameValue" type="name" class="form-control"
    id="exampleFormControlInput1">
</div>
<div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input name="email" required [(ngModel)]="emailValue" type="email" class="form-control"
    id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
  <textarea name="message" required [(ngModel)]="messageValue" class="form-control" id="exampleFormControlTextarea1"
    rows="3" placeholder="Type message here"></textarea>
</div>
<div class="text-center">
  <button class="btn " type="submit" (click)="open()" data-toggle="modal" data-target="#exampleModal">SEND</button>
</div>

这是ts文件

import { Component, OnInit, AfterViewInit } from "@angular/core";
import * as firebase from "firebase";
import { AngularFirestore } from "@angular/fire/firestore";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { Observable } from "rxjs";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ModalContactFormComponent } from "../../components/modal-contact-form/modal-contact- 
 form.component";

@Component({
  selector: "app-contactform",
  templateUrl: "./contactform.component.html",
  styleUrls: ["./contactform.component.scss"]
})
export class ContactformComponent implements OnInit, AfterViewInit {
   // nameValue = "";
   // emailValue = "";
  // messageValue = "";

  // name: Observable<any[]>;
 // email: Observable<any[]>;
// message: Observable<any[]>;
 data: {
 name: "";
 email: "";
 message: "";
};
constructor(public db: AngularFirestore, private modalService: NgbModal) {}

// onSubmit() {
//   this.db.collection("Messages").add({
//     name: this.nameValue,
//     email: this.emailValue,
//     message: this.messageValue
//   });
//   this.nameValue = "";
//   this.emailValue = "";
//   this.messageValue = "";
// }
onSubmit() {
 this.db.collection("Contact Messages").add({
   name: this.data.name,
   email: this.data.email,
   message: this.data.message
 });
}
       ngOnInit() {}

      ngAfterViewInit(): void {}

   open() {
    const modalRef = this.modalService.open(ModalContactFormComponent);
  }
}

我已经坚持了三天。最初它是我几个月前做的一个项目，我检查了很多次，以至于一切都完全一样。除了集合的名称和数据内容之外，这是一个完美的匹配。应用程序模块文件也是如此。我真的没有选择。非常感谢您的帮助！

Answer 1

您没有将表单中使用的变量指向模型值

 export class ContactformComponent implements OnInit, AfterViewInit {
   nameValue = "";
   emailValue = "";
   messageValue = "";

// data: {
// name: "";
// email: "";
// message: ""
// };
constructor(public db: AngularFirestore, private modalService: NgbModal) {}


onSubmit() {
 this.db.collection("Contact Messages").add({
   name: this.nameValue,
   email: this.emailValue,
   message: this.messageValue
 });
}

尝试使用第二个未提交的onsubmit并从适当的表单模型中重命名值

Answer 2

好吧，我弄清楚了，以防万一有人遇到相同的问题，这是我的代码（通过简单验证）

import { Component, OnInit, AfterViewInit } from "@angular/core";
import * as firebase from "firebase";
import { AngularFirestore } from "@angular/fire/firestore";
import { Validators, FormControl, FormBuilder } from "@angular/forms";
import { Observable } from "rxjs";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ModalContactFormComponent } from "../../components/modal-contact- 
form/modal-contact-form.component";

@Component({
  selector: "app-contactform",
  templateUrl: "./contactform.component.html",
  styleUrls: ["./contactform.component.scss"]
})
export class ContactformComponent implements OnInit, AfterViewInit {
  contactForm = this.fb.group({
    name: ["", [Validators.required, Validators.minLength(3)]],
    email: ["", [Validators.required, Validators.email]],
    message: ["", [Validators.required, Validators.minLength(10)]]
  });

  constructor(
    public db: AngularFirestore,
    private modalService: NgbModal,
    private fb: FormBuilder
  ) {}

  onSubmit() {
    console.warn(this.contactForm.value);

    this.db.collection("Contact Messages").add({
      name: this.contactForm.value.name,
      email: this.contactForm.value.email,
      message: this.contactForm.value.message
    });
  }

  ngOnInit() {}

  ngAfterViewInit(): void {}

  open() {
    this.modalService.open(ModalContactFormComponent);
  }
}




 <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
  <label for="exampleFormControlInput1">First & Last Name</label>
  <input formControlName="name" class="form-control" 
 id="exampleFormControlInput1">
 </div>
 <div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input formControlName="email" class="form-control" 
  id="exampleFormControlInput1" placeholder="name@example.com">
 </div>
 <div class="form-group">
  <textarea formControlName="message" class="form-control" 
   id="exampleFormControlTextarea1" rows="3"
    placeholder="Type message here"></textarea>
   </div>
   <div class="text-center">
  <!-- <button class="btn " type="submit" (click)="open()" data-toggle="modal" 
  data-target="#exampleModal">SEND</button> -->
  <button class="btn " type="submit" [disabled]="!contactForm.valid" data- 
   toggle="modal"
    data-target="#exampleModal">SEND</button>
   </div>
 </form>

无法将数据发送到Firestore

2 个答案: