Угловые реактивные формы с FormArray внутри вложенной FormGroup - PullRequest
Новая
       31

Угловые реактивные формы с FormArray внутри вложенной FormGroup

0 голосов
/ 13 декабря 2018

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

У меня есть следующая угловая реактивная форма (которая выглядит хорошо, если я сравниваю со связанным вопросомответ): 

this.frm = this.fb.group({
  // ... a bunch of other groups
  // and then:

  custom_data: this.fb.group({
    pairs: this.fb.array([
      this.fb.group({
        custom_key: '',
        custom_value: ''
      })
    ]),
    expire_date: '',
    active: ['', Validators.required]
  })
});

Я не могу заставить его рендериться, независимо от того, что я пробовал, я получаю ошибку.Это последний / текущий фрагмент кода, который я получил, после всех других ответов и результатов поиска в Google, которые я смог найти: 

<form [formGroup]="frm">

  <fieldset>
    <legend>Custom Data:</legend>

    <ng-container formGroupName="custom_data">
      <div class="row">

        <div formArrayName="pairs">
          <div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">
            <div [formGroupName]="i">
              <input type="text" formControlName="custom_key" placeholder="Custom key" />
              <input type="text" formControlName="custom_value" placeholder="Custom value" />
            </div>
          </div>
        </div> <!-- / end FormArray -->

        <div class="col-xs-6">
          <div class="form-group">
            <label class="control-label">Expires</label>
            <input type="text" formControlName="expire_date" class="form-control" />
          </div>
        </div>

        <div class="col-xs-6">
          <div class="form-group">
            <label class="control-label">Active<sup>*</sup></label>
            <select formControlName="active" class="form-control">
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>
          </div>
        </div>

      </div>
    </ng-container>
  </fieldset>    
</form>

Я безуспешно пробовал все следующее:

<div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">

<div *ngFor="let pair of pairs.controls; let i = index">

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

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

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Так что я закончил переделывать его с нуля.Странная вещь ... оказывается, что третья вещь, которую я попробовал, в конце концов сработала: 

<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">

Не уверен, почему это не сработало в первый раз.

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

myFormArray() {
  return this.frm.controls['custom_data'].get('pairs') as FormArray;
}

, а затем в моем шаблоне использовать метод: 

<div *ngFor="let pair of myFormArray().controls; let i = index">

(который действительностранно и не нужно, если вы спросите меня ...)

0 голосов
/ 13 декабря 2018

Вы должны нажать на массив, вы можете проверить эту ссылку, например

...