Angular - FormBuilder - Как избежать дублирования данных

Что я использую

  • угловатый
  • Firestore

Чего я пытаюсь достичь

  • Форма редактирования

  • Предварительное заполнение входных данных на основе значений в firestore с использованием 'formControlName'

Проблема

  • Я подписываюсь на мой проект документа

  • Я пытаюсь обновить глобальные переменные на основе возвращенных данных

  • Глобальные переменные не обновляются, пока я не продублирую "formBuilderGroup" как в ngOnInit, так и в моей функции, которая возвращает данные.

Вопрос

  • Как я могу указать свой formBuilder в ngOnInit и больше нигде, чтобы избежать его дублирования?

Component.ts

  • Как вы можете видеть здесь, this.formBuilder указывается дважды, как в функции getAlbumData, так и в ngOnInit. Если я удаляю любой из них, мои данные не возвращаются в моей привязке HTML.

import { Component, OnInit } from '@angular/core';

// Firestore
import { Observable } from 'rxjs/Observable';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';

// Firebase
declare var require: any
const firebase = require("firebase");

// Routes
import { Router, ActivatedRoute } from '@angular/router';

// Forms
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

// Moment JS
declare var moment: any;



@Component({
  selector: 'app-albums-edit',
  templateUrl: './albums-edit.component.html',
  styleUrls: ['./albums-edit.component.css']
})

export class albumsEditComponent implements OnInit {

  folderId: string;
  albumId: string;

  private albumDoc: AngularFirestoreDocument<any>;
  album: Observable<any>;

  private albumCollection: AngularFirestoreCollection<any>;

  albumEdit: FormGroup;



  // album Data
  album_title: string;
  album_reference: string;
  album_date_formatted: string;


  constructor(
    private readonly afs: AngularFirestore,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private formBuilder: FormBuilder
  ) { }

  /* ------------------------------------- */
  /* ngOnInit */
  /* ------------------------------------- */
  ngOnInit() {

    // Look at the url for the Folder and album ID and set the local variable
    this.activatedRoute.params.forEach((urlParameters) => {
      this.folderId = urlParameters['folderId'];
      this.albumId = urlParameters['albumId'];
    });

    // Return the albums list
    this.getalbumData();

    this.albumEdit = this.formBuilder.group({
      album_title: [this.album_title],
      album_reference: [this.album_reference],
      album_date: [this.album_date_formatted],
    });
  }

  /* ------------------------------------- */
  /* RETURN album DATA */
  /* ------------------------------------- */
  getalbumData() {
    this.albumDoc = this.afs.doc<any>(`folders/${this.folderId}/albums/${this.albumId}`);
    this.album = this.albumDoc.snapshotChanges();
    this.album.subscribe((value) => {

      // The returned Data
      const data = value.payload.data();

      // Format the album Date
      var albumTimeStamp = data.album_date;
      var albumDateFormatted = moment(albumTimeStamp).toISOString();
    
      this.album_id = value.payload.id;
      this.album_title = data.album_title;
      this.album_reference = data.album_reference;
      this.album_date_formatted = albumDateFormatted;

      this.albumEdit = this.formBuilder.group({
        album_title: [this.album_title],
        album_reference: [this.album_reference],
        album_date: [this.album_date_formatted],
      });


    });
  }




}

Любая помощь о том, как лучше отформатировать это, была бы великолепно оценена.

0 ответов

Другие вопросы по тегам