我有一个使用MEAN堆栈的应用程序，但是每次我在input标记中放入内容时，数据库都会说输入为空，除了表单名。输入来自旁边的面板。见下图：

有人知道我在做什么错吗？

请参阅以下代码： 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" cdkDrag>
            <div *ngSwitchCase="'Categorie'">{{item}}</div>
            <div *ngSwitchCase="'Textbox'">
              <input type="text" formControlName="textbox" #textbox/> 
            </div>
            <div *ngSwitchCase="'Textarea'">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchCase="'Date'">
                <div class="example-wrapper">
                    <p>Selecteer een datum:</p>
                    <kendo-dateinput
                [(value)]="value" formControlName="date" #date
            ></kendo-dateinput>
                </div>
            </div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        <div class="verwijder">
          <button (click)="removePagina(i)">Verwijder Pagina</button>

        </div>
        <div class="opslaan">
          <button (click)="addFolders(form_name.value,textbox?.value,date?.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],textbox: ['',date: ['',Validators.required]
    });
  }

  addFolders(form_name,textbox,date) {
    this.bs.addFolders(form_name,date);
  }

  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: [],textbox: [],date: [],}));
  }

  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);