html - 如何使用 Angular 将元素保存在数据库容器中？

Question

我正在使用 Angular，我需要一些建议。我尝试创建一个容器，可以在其中放置名称为 dropdown 或 calendar 的框。这些框带有属性，例如粉色日历或包含3个项目的下拉列表。

我想要的是，将这些带有属性的名称保存在我的数据库中。我创建了一个 REST API，但我真的不知道如何保存这些东西。我尝试将这些元素放入输入中，以便可以使用 formControlName 保存它们，但无法将元素放入输入中。我还尝试使用 ngSwitch，其中每个 ngSwitchCase 都有自己的 formControlName，但随后出现错误:

Cannot find control with path: 'forms -> 0 -> Textbox.0'

formadd.component.html

div class="add">
  <form [formGroup]="paginaForm" (submit)="onFormSubmit()">
    <div formArrayName="forms">
      <div class="drag" *ngFor="let form of forms; let i = index;" [formGroupName]="i">
        <mat-toolbar class="toolbar" color="warn">
          <div class="title">
            <input class="form_name" placeholder="Formulier Naam" type="text" formControlName="form_name" #form_name />
          </div>
          <div
            *ngIf="paginaForm.controls['form_name']?.invalid && (paginaForm.controls['form_name'].dirty || paginaForm.controls['form_name'].touched)"
            class="alert alert-danger">
            <div *ngIf="paginaForm.controls['form_name']?.errors.required">
              Formuliernaam is required.
            </div>
          </div>
        </mat-toolbar>
        <fieldset class="element">
          <legend class="voeg-element" placeholder="voeg element toe" cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="done"
          (cdkDropListDropped)="drop($event)" >
          <div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done; let i = index" cdkDrag>
            <div *ngSwitchCase="'Categorie'">{{item}}</div>
            <div *ngSwitchCase="'Textbox'">
              <input type="text" [formControlName]="item + '.' + i" #element/> 
            </div>
            <div *ngSwitchCase="'Textarea'">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchCase="'Date'">
                <div class="example-wrapper">
                    <p>Selecteer een datum:</p>
                    <kendo-dateinput
                [(value)]="value"
            ></kendo-dateinput>
                </div>
            </div>
            <div *ngSwitchCase="'Email'">{{item}}</div>
            <div *ngSwitchCase="'Integer'">{{item}}</div>
            <div *ngSwitchCase="'Boolean'">{{item}}</div>
            <div *ngSwitchCase="'Checkbox'">{{item}}</div>
            <div *ngSwitchCase="'Dropdown'">{{item}}</div>
            <div *ngSwitchCase="'Label'">{{item}}</div>
            <div *ngSwitchCase="'Locatie'">{{item}}</div>
            <div *ngSwitchCase="'Subject'">{{item}}</div>
            <div *ngSwitchCase="'Document'">{{item}}</div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        <div
          *ngIf="paginaForm.controls['element']?.invalid && (paginaForm.controls['element'].dirty || paginaForm.controls['element'].touched)"
          class="alert alert-danger">
          <div *ngIf="paginaForm.controls['element']?.errors.required">
            Element is required.
          </div>
        </div>
        <div class="verwijder">
          <button (click)="removePagina(i)">Verwijder Pagina</button>

        </div>
        <div class="opslaan">
          <button (click)="addFolders(form_name.value, element.value)"
            [disabled]="paginaForm.pristine || paginaForm?.invalid">Opslaan Pagina</button>

        </div>
      </fieldset>
      </div>
    </div>
    <div class="toevoegen">
      <button type="button" (click)="addPagina()">
        Pagina toevoegen
      </button>
    </div>
  </form>
</div>

formadd.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder, FormArray } from '@angular/forms';
import { FoldersService } from '../folders.service';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-formadd',
  templateUrl: './formadd.component.html',
  styleUrls: ['./formadd.component.css']
})
export class FormaddComponent implements OnInit {
  paginaForm: FormGroup;

  constructor(private fb: FormBuilder, private bs: FoldersService) {
    this.createForm();
  }


  createForm() {
    this.paginaForm = this.fb.group({
      form_name: ['', Validators.required],
      element: ['', Validators.required],
    });
  }

  addFolders(form_name, element) {
    console.log(this.paginaForm.value.forms[0]);
    this.bs.addFolders(form_name, element);
  }

  ngOnInit() {
    this.paginaForm = this.fb.group({
      forms: this.fb.array([])
    });
  }

  onFormSubmit() {
    alert(JSON.stringify(this.paginaForm.value));
  }

  addPagina() {
    (<FormArray>this.paginaForm.get('forms')).push(this.fb.group({
      form_name: [],
      element: [],
    }));
  }

  get forms() {
    return (<FormArray>this.paginaForm.get('forms')).controls;
  }

  removePagina(i: number) {
    (<FormArray>this.paginaForm.get('forms')).removeAt(i);
  }

  done = [];
  drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    this.done.push(event.item.data);

或

Cannot read property 'value' of undefined

当我更改声明时

<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done; let i = index" cdkDrag>
            <div *ngSwitchCase="'Categorie'">{{item}}</div>
            <div *ngSwitchCase="'Textbox'">
              <input type="text" [formControlName]="item + '.' + i" #element/> 
            </div>

到

<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done; let i = index" cdkDrag>
            <div *ngSwitchCase="'Categorie'">{{item}}</div>
            <div *ngSwitchCase="'Textbox'">
              <input type="text" [formControlName]="element" #element/> 
            </div>

有人知道更好的方法来完成这个 super 任务吗？

Answer 1

如果您需要将整个 HTML 元素保存到数据库中，您可以尝试将 httpClient.post() 的 Content-Type 设置为 文本/纯文本。通过这种方式，您可以发送带有属性的确切元素。

<form id="htmlContainer" [formGroup]="paginaForm" (submit)="onFormSubmit()">
    <!-- form data -->
</form>

通过使用 document.getElementById('id_of_element') 通过 id 属性访问它来发布整个表单元素或任何您需要的元素

ngOnInit() {
    this.body = document.getElementById('htmlContainer');
}

onFormSubmit() {
    const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
    return this.http.post('your_url', this.body, { headers, responseType: 'text' })
      .subscribe(data => console.log(data));
}

然后要检索文本格式的数据，请将responseType设置为text。

return this.http.get('your_url', {responseType: 'text'})
    .subscribe(data => console.log(data));