Začíname s Angularom – Dynamické formuláre + neoficiálne riešenie

Keďže oficiálne riešenie uvedené v dokumentácii od Angularu sa mi zdalo trošku ťažkopádne, skúsil som ho o niečo zjednodušiť. V rámci prvotných testov mi formulár fungoval, takže je možné, že aj tento zjednodušený zápis dynamického formulára je plne funkčný. V prípade, že by ste zistili, že niečo na tomto riešení nefunguje, uveďte to do komentára.

Ak chcete spoznať len oficiálny spôsob tvorby dynamických formulárov, postup nájdete v tomto videu.

A teraz uvádzam zjednodušenú verziu. Do príkladov dávam len obsah súborov component.ts a component.html.

Obsah súboru component.ts

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

@Component({
  selector: 'app-dynamic-forms2',
  templateUrl: './dynamic-forms2.component.html',
  styleUrls: ['./dynamic-forms2.component.css']
})
export class DynamicForms2Component implements OnInit {

  form: any = {};
  labels = ["Custom label 1", "Custom label 2", "Custom label 3", "Custom label 4"];

  constructor(private fb: FormBuilder) { }

  addField(label: string, value: string) {
    this.form.push(this.fb.control(value, Validators.required));
    this.labels.push(label);
  }

  ngOnInit(): void {

    let formControls = [];
    for (let i = 1; i < 5; i++) {
      formControls.push(this.fb.control('value ' + i, Validators.required));
    }

    this.form = this.fb.array(formControls);
    console.log(this.form.controls);
  }

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

}

Obsah súboru component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <div *ngFor="let field of form.controls; let i = index">
      <label for="field-{{ i }}">{{ labels[i] }}</label>
      <input
        class="form-control"
        id="field-{{ i }}"
        type="text"
        [formControlName]="i"
      />
    </div>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!form.valid">
    Submit
  </button>
</form>
<br />
<p>
  <label for="addFieldLabel">Field name</label>
  <input #addLabel id="addFieldName" type="text" />
  <label for="addField">Field value</label>
  <input #addValue id="addField" type="text" />

  <button
    (click)="addField(addLabel.value, addValue.value)"
    class="btn btn-primary"
  >
    Add field
  </button>
</p>

• Share on Facebook