ionic firestore submit data

Question

I am trying to submit some data in firestore but its showing me error.

FirebaseError: Function CollectionReference.doc() requires its first argument to be of type string, but it was: undefined.

installment.html

<ion-content>
  <div [ngSwitch]="galleryType">
    <ion-card *ngSwitchCase="'Form'">
      <ion-item>
        <ion-label floating>Name</ion-label>
        <ion-input type="text" [(ngModel)]="name">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Address</ion-label>
        <ion-input type="text" [(ngModel)]="address">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>CNIC</ion-label>
        <ion-input type="number" [(ngModel)]="cnic">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Email</ion-label>
        <ion-input type="email" [(ngModel)]="email">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Phone number </ion-label>
        <ion-input type="number" pattern="^([+]92[0-9]{10}|[0-9]{11})$" [(ngModel)]="number">
        </ion-input>
      </ion-item>
      <br>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-select [(ngModel)]="city">
          <ion-option value="karachi">Karachi</ion-option>
          <ion-option value="Lahore">Lahore</ion-option>
          <ion-option value="Multan">Multan</ion-option>
          <ion-option value="islamabad">Islamabad</ion-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label floating>Profession</ion-label>
        <ion-input type="text" [(ngModel)]="profession">
        </ion-input>
      </ion-item>
      <br>
      <ion-item>
        <ion-label >Select a Bank</ion-label>
        <ion-select [(ngModel)]="bank">
          <ion-option value="HBL">HBL</ion-option>
          <ion-option value="Al Habib">Al Habib</ion-option>
          <ion-option value="SCB">SCB</ion-option>
          <ion-option value="BI">Bank Islami</ion-option>
        </ion-select>
      </ion-item>
      <button style="display:block;margin: 16px auto;" ion-button no-padding (click)="gotoDate()"><img class="tick" src="assets/image/tick.png"></button>
    </ion-card>
    <ion-card *ngSwitchCase="'Date'">
      <ion-item>
        <ion-label floating>Guarantor 1 Name </ion-label>
        <ion-input type="text" [(ngModel)]="g1name" >
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Phone number </ion-label>
        <ion-input type="number" pattern="^([+]92[0-9]{10}|[0-9]{11})$" [(ngModel)]="g1number">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Address </ion-label>
        <ion-input type="text" [(ngModel)]="g1address">
        </ion-input>
      </ion-item>
      <br>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-select [(ngModel)]="g1city">
          <ion-option value="karachi">Karachi</ion-option>
          <ion-option value="lahore">Lahore</ion-option>
          <ion-option value="multan">Multan</ion-option>
          <ion-option value="islamabad">Islamabad</ion-option>
        </ion-select>
      </ion-item>
      <br>
      <ion-item>
        <ion-label floating>Guarantor 2 Name </ion-label>
        <ion-input type="text" [(ngModel)]="g2name">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Phone number </ion-label>
        <ion-input type="text" pattern="^([+]92[0-9]{10}|[0-9]{11})$" [(ngModel)]="g2number">
        </ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Address </ion-label>
        <ion-input type="text"[(ngModel)]="g2address" >
        </ion-input>
      </ion-item>
      <br>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-select [(ngModel)]="g2city">
          <ion-option value="karachi">Karachi</ion-option>
          <ion-option value="lahore">Lahore</ion-option>
          <ion-option value="multan">Multan</ion-option>
          <ion-option value="islamabad">Islamabad</ion-option>
        </ion-select>
      </ion-item>
      <button style="display:block;margin: 16px auto;" ion-button no-padding><img class="tick" src="assets/image/tick.png" (click)="submit(name, address, cnic, email, number, city, profession, bank, g1name, g1number, g1address, g1city, g2name, g2address, g2number, g2city) "></button>
    </ion-card>
  </div>
</ion-content>

.ts

submit(name, address, cnic, email, number, city, profession, bank, g1name,
  g1number, g1address, g1city, g2name, g2address, g2number, g2city) {
  if (this.name == "") {
    console.log('empty');
    return;
  } else {
    let deal = {
      name: this.name,
      address: this.address,
      cnic: this.cnic,
      email: this.email,
      number: this.number,
      city: this.city,
      profession: this.profession,
      bank: this.bank,
      // Guarantor1name: this.g1name,
      g1number: this.g1number,
      g1address: this.g1address,
      g1city: this.g1city,
      //Guarantor2name: this.g2name,
      g2number: this.g2number,
      g2address: this.g2address,
      g2city: this.g2city,
    }

    this.afs.collection('installment').doc().set(deal);
    let alert = this.alertCtrl.create({
      title: "ATTENTION",
      subTitle: "Done",
      buttons: ['OK']
    });
    alert.present();
  }
}

I need to send the data to firestore. Any one can please tell me how can I send it?

Answer 1

Looks like you are trying to create a new document, but currently, your code doesn't set a document id to be created. One suggestion is to just let Cloud Firestore use an auto id.

To do this change this line:

this.afs.collection('installment').doc().set(deal);

To this:

this.afs.collection('installment').add(deal);