Formas reactivas angulares: ¿se restablece prístina cuando el usuario revierte los cambios de la interfaz de usuario a los valores originales?

Question

Quiero habilitar el botón Enviar en el formulario solo cuando se cambia la entrada del formulario.

El botón Enviar debe estar deshabilitado cuando no se cambian los valores de control de formulario.

Intenté usar la bandera FormGroup.pristine para habilitar / deshabilitar el botón Enviar .

Funciona bien para habilitar el botón.

Sin embargo, no se restablece truecuando el valor en la interfaz de usuario se cambia a su valor original.

El código del componente:

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>

De forma predeterminada, la opción "mujer" está seleccionada en el cuadro de selección.

Cuando el usuario lo cambia a "masculino", por ejemplo, el botón Enviar está habilitado.

Ahora, cuando el usuario vuelve a seleccionar "mujer", el botón Enviar no se desactiva.

El usuario debe hacer clic en el botón Enviar para recuperar el estado original y desactivar el botón.

¿Cómo restablecer el estado original cuando el usuario vuelve a cambiar el valor predeterminado del cuadro de selección, sin hacer clic en el botón Enviar ?

Versión angular: 8.2.14.

Actualizar

Lamentablemente, angular no parece cambiar el estado del formulario a prístino, cuando el usuario cambia la interfaz de usuario a los valores predeterminados.

Entonces, tenemos que escribir código para hacer la comparación de datos y marcar el formulario en un estado prístino.

Answer 1

Puede usar el método markAsPristine para establecer el estado prístino como verdadero, cuando los datos vuelven a defaultValue de esta manera:

ngOnInit() {
    const defaultValue = this.registrationForm.value;
    this.registrationForm.valueChanges
      .pipe(debounceTime(200))
      .subscribe(value => {
        if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
          this.registrationForm.markAsPristine();
        }
      });
  }

Answer 2

Puede crear un método que devuelva verdadero o falso para deshabilitar el botón de envío si no se cambia nada.

Suponiendo que tiene algún objeto que se utiliza para almacenar las entradas del formulario.

Consulte el siguiente código para la función:

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

y en el html agregue la siguiente línea

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