Как добавить несколько строк в таблицу ngFor динамически в режиме редактирования в angular 6 - PullRequest
Новая
       33

Как добавить несколько строк в таблицу ngFor динамически в режиме редактирования в angular 6

0 голосов
/ 29 мая 2020

У меня есть таблица ngFor, в которой я могу добавить одну строку в режиме редактирования, в которой есть несколько полей выбора.

Я могу редактировать, отменять и сохранять данные в базе данных, которая является mysql.

Вопрос в том, что мне нужно динамически добавить более одной строки в таблицу в режиме редактирования и сохранить их все в одном go. На самом деле это проект для моего офиса, поэтому я не могу поделиться кодом. но я использую 

myArray.splice(0,0,newObject);
myArray = [...myArray]

, чтобы добавить новую строку в таблицу. Как добавить несколько строк, используя одну и ту же с отдельной кнопкой отмены.

1 Ответ

2 голосов
/ 29 мая 2020

Демо Stackblitz

Для этого вы можете работать с FormArray. По сути, каждая строка вашей таблицы будет записью в вашем FormArray: 

<form [formGroup]="_form" novalidate>
    <table>
        <tbody formArrayName="data">
          <tr *ngFor="let array of _form.get('data').controls; index as i"
              [formGroupName]="i">
            <td>
              <input matInput 
                     formControlName="name" 
                     placeholder="Name" 
                     required>
            </td>
            <td>
              <input matInput 
                     formControlName="surname" 
                     placeholder="Surname" 
                     required>
            </td>
            <td>
              <select formControlName="gender">
                <option [ngValue]="null">GENDER</option>
                <option *ngFor="let g of _genders" [ngValue]="g">
                  {{g}}
                </option>
              </select>
            </td>
            <td>
              <button (click)="_removeRow(i)" type="button">
                Remove
              </button>
            </td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td>
              <button type="button" (click)="_addRow()">
                New Row
              </button>
            </td>
          </tr>
        </tbody>
    </table>
</form>

Обратите внимание, что элементы управления в массиве форм также являются FormGroup вместо простых элементов управления. Общее _form может быть объявлено как: 

this._form = this._formBuilder.group({
  data: this._formBuilder.array([])
});

И вы можете добавить FormGroup к FormArray, выполнив: 

const formArray: FormArray = this._form.get('data') as FormArray;

const form = this._fb.group({
  name: ['', Validators.required],
  surname: ['', Validators.required],
  gender: [null, Validators.required]
});

formArray.push(form);

Вы можете удалить строку, удаление его из formArray: 

const formArray: FormArray = this._form.get('data') as FormArray;
formArray.removeAt(index);
...