вложенная формара в группе угловых 6 - PullRequest
Новая
       34

вложенная формара в группе угловых 6

0 голосов
/ 16 октября 2018

Добрый день.

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

вот моя html-форма: 

<div class="form-group col-md-6" formGroupName="schema">
  <div formArrayName="currencies">
    <input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
  </div>
</div>

, а вот моя ts formBuilder. 

this.createPromo = this.fb.group({
      type: ['promotion'],
      name: ['', Validators.required],
      description: ['', Validators.required],
      enabled: ['', Validators.required],
      promotion_type: ['', Validators.required],
      start: ['', Validators.required],
      end: ['', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: '',
            currency: 'ZAR'
          })
        ])
      }),
    });

Поэтому я хочу, чтобы моя форма отправлялась в виде сгруппированного массива.Однако ошибка в консоли следующая Cannot find control with path: 'schema -> currencies -> percentage', поэтому я не могу отправить свою форму, так как percentage пусто даже после ввода числа.

1 Ответ

0 голосов
/ 16 октября 2018

Вам понадобится следующее для вашего сценария:

  1. Родитель div с formGroupName="schema".
  2. Внутри этого, div с formArrayName="currencies".
  3. Внутри этого, div с ngFor="let currencyGroup of currencyFormGroups; let i = index;".Обратите внимание, что currencyFormGroups является геттером в вашем классе компонентов.
  4. Внутри него div с [formGroupName]="i", где i - это индекс, который мы создали на лету в *ngFor.
  5. Заметьте, что два input с formControlName="percentage" и formControlName="currency" соответственно.

.

Вот все эти шаги, переведенные в код: 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  createPromo: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.createPromo = this.fb.group({
      'type': ['type'],
      name: ['name', Validators.required],
      description: ['description', Validators.required],
      enabled: ['enabled', Validators.required],
      promotion_type: ['promotion_type', Validators.required],
      start: ['start', Validators.required],
      end: ['end', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: 'percentage',
            currency: 'ZAR'
          }),
          this.fb.group({
            percentage: 'percentage',
            currency: 'INR'
          }),
        ])
      }),
    });
  }

  get currencyFormGroups() {
    return (<FormArray>(<FormGroup>this.createPromo.get('schema')).get('currencies')).controls;
  }

}

Шаблон: 

<form [formGroup]="createPromo">

  ...

  <div formGroupName="schema">
    <div formArrayName="currencies">
      <div *ngFor="let currencyGroup of currencyFormGroups; let i = index;">
        <div [formGroupName]="i">
          <input 
            type="text" 
            name="percentage"
            formControlName="percentage">
          <input 
            type="text" 
            name="currency"
            formControlName="currency">
        </div>
      </div>
    </div>
  </div>

</form>

Вот Образец StackBlitz для вашей ссылки.

PS: Для простоты я рассмотрел все элементы управления формой как input.Пожалуйста, внесите соответствующие изменения.

...