Сделать редактируемую таблицу в angular одним нажатием кнопки - PullRequest
0 голосов
/ 09 июля 2020

У меня есть таблица и кнопка редактирования вне нее. При нажатии кнопки все строки таблицы должны стать доступными для редактирования. Часть пользовательского интерфейса, которую я завершил, но как я могу отправить отредактированные данные в серверную часть, а также я хочу применить проверки к этим редактируемым полям. Как я могу добиться этого, используя angular.

`

                <th class="col-4">employee_id</th>
                <th class="col-2">Name</th>
                <th class="col-2">Age</th>

            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-4">1</td>
                <td class="col-2"> <input type="text" [readonly]="!isEdit" value="100"></td>
                <td class="col-2"> <input type="text" [readonly]="!isEdit" value="100"></td>

            </tr>  
            <tr class="d-flex">
                <td class="col-4">1</td>
                <td class="col-2"> <input type="text" [readonly]="!isEdit" value="100"></td>
                <td class="col-2"> <input type="text" [readonly]="!isEdit" value="100"></td>

            </tr>                

        </tbody>
    </table>
    <div *ngIf="isEdit" class="text-right mt-2">
     <button class="tertiary-button" (click)="isEdit = false">
       Cancel
     </button>
     <button class="primary-button">
       Save
      </button>

   </div>
   <div *ngIf="!isEdit" class="text-right mt-2">
     <button class="primary-button" (click)="isEdit = true">
      Edit
     </button>
   </div>

`

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...