Angular реактивные формы - происходит ли первоначальный сброс, когда пользователь возвращает изменения пользовательского интерфейса к исходным значениям?

Aug 19 2020

Я хочу включить кнопку « Отправить» в форме только при изменении ввода формы.

Кнопка « Отправить» должна быть отключена, если значения элементов управления формы не изменены.

Я пробовал использовать флаг FormGroup.pristine для включения / отключения кнопки « Отправить» .

Он отлично работает для включения кнопки.

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

Код компонента:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
  public registrationForm;
  public formValues = {
      gender: 1,
    };

  constructor(private formBuilder: FormBuilder) {
    this.registrationForm = formBuilder.group(this.formValues);
  }

  onSubmit(formData) {
    console.log('Your form is submitted', formData);
    this.registrationForm.reset(this.formValues);
  }
}
<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
  <div>
    <label for="gender">Gender</label>
    <select id="gender" formControlName="gender">
      <option value=1>female</option>
      <option value=2>male</option>
      <option value=3>do not specify</option>
    </select>
  </div>
  <input type="submit" [disabled]="registrationForm.pristine">
</form>

По умолчанию в поле выбора выбран вариант «женский».

Например, когда пользователь меняет его на «мужской», активируется кнопка « Отправить» .

Теперь, когда пользователь снова выбирает «женский», кнопка « Отправить» не отключается.

Пользователь должен нажать кнопку « Отправить» , чтобы вернуть исходный статус и отключить кнопку.

Как вернуться к исходному состоянию, когда пользователь изменяет значение поля выбора на значение по умолчанию, не нажимая кнопку « Отправить» ?

Угловая версия: 8.2.14.

Обновить

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

Поэтому нам нужно написать код для сравнения данных и пометить форму как нетронутую.

Ответы

2 Chellappanவ Aug 19 2020 at 21:16

Вы можете использовать метод markAsPristine, чтобы установить исходный статус true, когда данные возвращаются к defaultValue следующим образом:

ngOnInit() {
    const defaultValue = this.registrationForm.value;
    this.registrationForm.valueChanges
      .pipe(debounceTime(200))
      .subscribe(value => {
        if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
          this.registrationForm.markAsPristine();
        }
      });
  }
1 MinalShah Aug 19 2020 at 20:59

Вы можете создать один метод, который возвращает true или false для отключения кнопки отправки, если ничего не изменилось.

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

См. Приведенный ниже код для функции:

oldObj = _.cloneDeep(this.obj)
dataChanged(){
 return !_.isEqual(this.oldObj, this.obj)
}

и в html добавьте строку ниже

<input type="submit" [disabled]="!hasChanged()">