web-dev-qa-db-fra.com

Angular 5 Formulaire de vérification sale

J'ai un formulaire et un bouton pour le sauvegarder. Le bouton ne doit être activé que s'il existe des modifications non enregistrées (entrées) dans le formulaire.

<form>
    <div>
    ... (inputs)
        <span (click)="save()"> Save </span>
    </div>
</form>

Existe-t-il un mécanisme intégré pour la vérification de formulaire malpropre dans Angular 5? Quel est le moyen le plus simple d'implémenter ce scénario?

javascripthtmlangularangular5
7
AllmanTool

Oui, c’est le cas: je vous conseille vivement de jeter un coup d’œil sur le documentation des formulaires réactifs.

En dehors de cela, le mécanisme intégré est uniquement destiné à vérifier l'état du formulaire:

  • touched signifie que l'utilisateur a saisi le formulaire
  • dirty/!pristine signifie que l'utilisateur a effectué une modification

Mais si vous voulez gérer les modifications apportées, vous ne devriez pas utiliser cela: si votre nom d'utilisateur change son nom d'utilisateur de "foo", à "bar", puis de nouveau à "foo", il n'y a aucun changement dans votre formulaire, de sorte que l'utilisateur doit pas avoir à envoyer ledit formulaire.

Au lieu de cela, je vous conseille de créer une fonction qui compare le formulaire à la valeur initiale de votre objet. Voici comment vous pouvez le faire:

// Creates a reference of your initial value
createReference(obj: any) {
  this.reference = Object.assign({}, obj);
}

// Returns true if the user has changed the value in the form
isDifferent(obj: any, prop: string) {
  return this.reference[prop] !== obj[prop];
}

submitForm(form: any) {
  // ... Business code ...
  hasChanges = false;
  for (let prop in form) {
    if (this.isDifferent(form, prop)) { hasChanges = true; }
  }
  // If no changes, cancel form submition
  if (!hasChanges) { return; }
}
11
user4676340

Lorsque vous travaillez avec des formes réactives ( https://angular.io/guide/reactive-forms ), il existe une propriété pristine et une propriété dirty sur le groupe de forme et le contrôle. Devrait ressembler à ceci:

<form form-group="myGroup">
  <div>
    <input type="text" formControlName="ctrl1">
    ... (further inputs)

    <span><button (click)="save()" [disabled]="myGroup.pristine"> Save </button></span>
  </div>
</form>

et le fichier .ts:

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

@Component({...})
export class YourFancyComponent {
  myGroup: FormGroup;
  constructor(private( formBuilder: FormBuilder) {
      this.myGroup = this.formBuilder.group({
        'ctrl1': 'defValue',
        'ctrl2': 'defaultValue2'
      });
  }
}

Pour les formulaires basés sur des modèles (selon https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel ), la classe css du contrôle de saisie modifié est modifiée de ng-pristine à ng-dirty mais cela n'aide pas avec le bouton de sauvegarde.

7
Chris