Как использовать Angular FormGroup для отображения документа Firestore, который содержит массивы - PullRequest
Новая
       16

Как использовать Angular FormGroup для отображения документа Firestore, который содержит массивы

0 голосов
/ 07 февраля 2019

Я пытаюсь динамически сгенерировать форму из документа в Firestore.

У меня есть документ статьи с именем, описанием и тегами.Теги хранятся в виде массива.Имя и описание являются строками.

Я получаю документ и исправляю его в FormBuilder.У меня есть директива: 

    this.docRef
      .valueChanges()
      .pipe(
        tap(doc => {
          if (doc) {
            this.formGroup.patchValue(doc);
            this.formGroup.markAsPristine();
            this.state = 'synced';
          }
        }),
        take(1)
      )
      .subscribe();
  }

Я использую ее в файле HTML: 

<form [formGroup]="articleForm" fireForm path="articles/{{commentId}}" (stateChange)="changeHandler($event)">
  [...]
    <div *ngFor="let tag of tags; let i=index" [formGroupName]="i">
      <mat-form-field>
        <input matInput placeholder="tag" formControlName="tag">
      </mat-form-field>
      <button mat-raised-button color="warn" (click)="deleteTag()">Delete</button>
    </div>
  </div>
  <button mat-raised-button color="primary" (click)="addTag()">Add tag</button>
</form>

И это мой component.ts 

ngOnInit(): void {

    this.articleForm = this.fb.group({
      name: ['', Validators.required],
      description: ['', Validators.required],
      tags: this.fb.array([]),
      ingredients: this.fb.array([])
    })

  }

  changeHandler(e) {
    this.state = e;
  }

  get tagForms() {
    return this.articleForm.get('tags') as FormArray
  }

  addTag() {

    const tag = this.fb.group({ 
      tags: []
    })

    this.tagForms.push(tag);
  }

  deleteTag(i) {
    this.tagForms.removeAt(i)
  }

Однако теги не отображаются в форме.Они появляются как пустой массив.И когда я сохраняю их, они переопределяют существующий массив массивом карт.

Как я могу отобразить элементы массива из документа firebase с FormBuilder?

...