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],
});
});
}
}
Любая помощь о том, как лучше отформатировать это, была бы великолепно оценена.