Create

Service

addMovie(movie: IMovie): Promise<void> {
  const itemCollection = collection(this.firestore, 'movies');
  return addDoc(itemCollection, {
    title: movie.title,
    imdb: movie.imdb,
    genre: movie.genre,
    year: movie.year,
    image: movie.image,
  }).then(() => {
    console.log('Movie added successfully');
  });
}

Component

export class AddMovieComponent {
  constructor(private readonly addMovieService: AddMovieService) {}

  form = new FormGroup({
    formTitle: new FormControl(),
    formImdb: new FormControl(),
    formGenre: new FormControl(),
    formYear: new FormControl(),
    formImage: new FormControl(),
  });

  onSubmit(): void {
    if (this.form.valid) {
      const movie: IMovie = {
        title: this.form.get('formTitle')?.value,
        imdb: +this.form.get('formImdb')?.value,
        genre: this.form.get('formGenre')?.value,
        year: +this.form.get('formYear')?.value,
        image: this.form.get('formImage')?.value,
      };

      this.addMovieService
        .addMovie(movie)
        .then(() => {
          console.log('Movie saved successfully to Firestore');
          this.form.reset(); // Az űrlap törlése az adatok mentése után.
        })
        .catch((error) => {
          console.error('Error saving movie to Firestore: ', error);
        });
    } else {
      console.error('Form is not valid.');
    }
  }
}

Template

<h2>Add movie</h2>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="movies mb-4">
  <div class="row">
    <div class="col">
      <label class="form-label" for="formTitle">Title</label>
      <input type="text" class="form-control" formControlName="formTitle" id="formTitle" placeholder="" />
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col">
      <label class="form-label" for="formGenre">Genre</label>
      <select id="formGenre" formControlName="formGenre" class="form-select">
        <option selected>Select ...</option>
        <option>Thriller</option>
        <option>Romantic</option>
        <option>Action</option>
        <option>Sci-fi</option>
        <option>Horror</option>
        <option>Comedy</option>
      </select>
    </div>
    <div class="col">
      <label class="form-label" for="formImdb">IMDB Rating</label>
      <input type="text" class="form-control" formControlName="formImdb" id="formImdb" placeholder="" />
    </div>
    <div class="col">
      <label class="form-label" for="formYear">Year</label>
      <input type="text" class="form-control" formControlName="formYear" id="formYear" placeholder="" />
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col">
      <label class="form-label" for="formImage">Image Source</label>
      <input type="text" class="form-control" formControlName="formImage" id="formImage" placeholder="" />
    </div>
  </div>
  <hr />
  <button type="submit" class="btn btn-dark">Add Movie</button>
</form>