Привязка формы группы в полях выбора с Angular - PullRequest
Новая
       13

Привязка формы группы в полях выбора с Angular

0 голосов
/ 01 сентября 2018

У меня есть вложенный массив JSON, который я должен перебрать в HTML, используя formgroup или formarray. Этот ответ должен повторяться в динамически создаваемых полях выбора в зависимости от длины массива. В ответ приходит JSON: 

var result = [{
    id: 1,
    options: [
      { option: 'Ram', toBeSelected: false },
      { option: 'Ravi', toBeSelected: true }
    ]
  },
  {
    id: 2,
    options: [
      { option: 'Pooja', toBeSelected: false },
      { option: 'Prakash', toBeSelected: false }
    ]
  }
]

Я должен перебрать это в HTML таким образом, чтобы, если у любого из этих параметров было toBeSelected как true, этот параметр должен быть предварительно выбран в HTML, а если нет, может отображаться текст заполнителя.

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

В соответствии с JSON, о котором идет речь, вы можете сделать его следующим образом: 

ngOnInit() {
    this.form = this._FormBuilder.group({
      selections: this._FormBuilder.array([])
    });

    // the api call should be made here
    this.jsonResponse.map(item => {
        const opts = item.options.filter(o => {
            return o.toBeSelected
        });
        if (opts.length) {
            this.addSelections(opts[0].option);
        } else {
            this.addSelections();
        }
    });
}

get selections() {
    return this.form.get('selections') as FormArray
}

addSelections(value?: string) {
    this.selections.push(
        this._FormBuilder.control((value ? value : ''))
    );
}

Live view здесь .

Ссылка на стек: https://stackblitz.com/edit/dynamic-form-binding-kx7nqf

0 голосов
/ 01 сентября 2018

Что-то в этом роде? 

<div *ngFor="let result of results">
  <p>ID - {{ result.id }}</p>
  <div *ngFor="let option of result.options">
    <input 
      type="checkbox" 
      [checked]="option.toBeSelected">
      {{ option.option }}
  </div>
</div>

Это не пример FormGroup, но он должен помочь вам понять, как это можно сделать.

Образец StackBlitz

...