Блог

я пытаюсь получить свои данные формы после того, как я связал входящие «случайные» поля со своей схемой, чтобы я мог использовать их в своем коде.

Я получаю какие-то данные с разными «заголовками», и мне нравится устанавливать эти случайные заголовки в свою схему с помощью формуляра и выборок. моя проблема в том, что я не могу получить «сопоставленные» данные. моя анкета пуста. я попробовал подход с реактивной формой, но у меня не получается выполнить последний шаг, на котором я должен связать свои поля.

Простые поля с помощью formcontrol работают нормально.

Вы можете найти мой код по этой ссылке.

Может быть, кто-нибудь сможет мне помочь.

Нам нужно создать отдельный элемент управления формой для каждого поля, incomingFieldNames и нам нужно поместить его в массив форм.

Пожалуйста, проверьте ниже

выбор.компонент.ts

 import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-selection',
  templateUrl: './selection.component.html',
  styleUrls: ['./selection.component.scss']
})
export class SelectionComponent implements OnInit {
  formData: FormGroup;

  // language selection
  lanugages: any[] = [
    { name: 'Italian', id: 1 },
    { name: 'Polish', id: 2 },
    { name: 'Czech', id: 3 },
    { name: 'English', id: 4 },
    { name: 'German', id: 5 }
  ];

  // default lang
  language: number = 2;

  // data for tablenames / header
  incomingFieldNames: string[] = [
    'ArticleNR',
    'Articleinformation',
    'Articleprize',
    'Articlesomething'
  ];

  newHeaderFieldsToMap: any[] = [
    { name: 'Articlenumber', value: 'artNr' },
    { name: 'Description / Name', value: 'artDesc' },
    { name: 'Prize', value: 'artPrize' }
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.formData = this.fb.group({
      language: [this.language, Validators.required],
      fields: this.fb.array([])
    });
    this.addFormArray();
  }

  get headerData() {
    return this.formData.controls['fields'] as FormArray;
  }

  addFormArray() {
    this.incomingFieldNames.map(field => {
      this.headerData.push(new FormGroup({ [field]: new FormControl()}))
    })
  }

  onSubmit() {
    console.log(this.formData.value);
  }
}

 

selection.component.html

 <h4>Data</h4>
<mat-divider></mat-divider>
<form [formGroup]="formData" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Select language</mat-label>
    <mat-select name="language" formControlName="language">
      <mat-option *ngFor="let lang of lanugages" [value]="lang.id">
        {{ lang.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div class="fields-container" formArrayName="fields">
    <p>
      Link fields
    </p>
    <ng-container *ngFor="let field of headerData.controls; let i = index;">
      <mat-form-field appearance="fill" [formGroupName]="i">
        <mat-label>{{ incomingFieldNames[i] }}</mat-label>
        <mat-select formControlName="{{incomingFieldNames[i]}}">
          <mat-option *ngFor="let hField of newHeaderFieldsToMap" [value]="hField.value">
            {{ hField.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </ng-container>
  </div>
  <button type="submit" mat-raised-button color="primary">Send</button>
</form>