Angular 7 - Как получить отредактированные поля из формы

Question

Я создал форму с несколькими полями как «Тип ввода текста», а значения для текстового поля заполняются из Back-end. Эта форма представляет собой страницу редактирования, где пользователь может редактировать только необходимые поля. Я использую кнопку отправки типа, когда форма ввода отправляется в Angular Компонент. Наряду с этим мне нужно отслеживать, какие поля редактируются в этой форме.

Followig - это код созданной мной формы Angular.

<form [formGroup]="form" (ngSubmit)="edit()">
    <div class="container-fluid">
            <div class="row">
              <div class="col-12 edit-branch-block"> 
                <tr>
                    <td>Attribute_Name_1</td>
                    <td><input type="text" formControlName="Attribute_Name_1" disabled></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_2</td>
                    <td><input type="text" formControlName="Attribute_Name_2"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_3</td>
                    <td><input type="text" formControlName="Attribute_Name_3"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_4</td>
                    <td><input type="text" formControlName="Attribute_Name_4"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_5</td>
                    <td><input type="text" formControlName="Attribute_Name_5"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_6</td>
                    <td><input type="text" formControlName="Attribute_Name_6"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_7</td>
                    <td><input type="text" formControlName="Attribute_Name_7"></td>
                </tr>  
                <tr></tr>
                <button type="submit" style="margin-left: 10px; background-color:burlywood;"  class="edit-branch-button"> Edit </button>            
            </div>
        </div>
    </div>
</form>

Если пользователь редактировал только два поля, мне нужно отследить, какие поля были отредактированы. Кто-нибудь может мне помочь в этом?

Answer 1

Вы хотите узнать, какие поля были изменены, прежде чем отправлять форму. Вы можете использовать .dirty на каждом элементе управления формы, но это скажет вам только, если значение было изменено в какой-то момент . .dirty будет по-прежнему возвращать true, если значение было изменено, а затем восстановлено.

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

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

Мой подход

Как и все в Angular компонентах, все должно исходить из вашей модели. Пока у нас есть копия нашей модели, мы можем сравнивать ее.

Получив свою модель, вы создаете форму, используя ее значения.

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

Учитывая следующую модель:

model = {
  first: 'first',
  second: 'second'
};

Я собираюсь построить следующую форму:

this.form = this.formBuilder.group({
  first: this.formBuilder.control(this.model.first),
  second: this.formBuilder.control(this.model.second)
});

Когда Форма отправлена, я могу сравнить текущие значения формы с моделью:

const dirtyFields = {
  first: this.form.value.first !== this.model.first,
  second: this.form.value.second !== this.model.second
};

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

Если вам все равно, что значение изменилось, а затем было возвращено, вы всегда можете просто проверить флаг dirty на элементах управления формы. Это все еще ручная проверка, поэтому вы можете также проверить сами значения.

DEMO: https://stackblitz.com/edit/angular-sb7r1k