web-dev-qa-db-fra.com

Détecter si les données du formulaire ont été modifiées

J'ai Angular - forme (non réactif), avec des données liées dans ngModel:

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

Comment puis-je désactiver le bouton d'envoi si les données liées n'ont pas été modifiées?

6

pour ce faire, vérifiez si le drapeau est sale, ce qui indique que le formulaire est sale ou non. 

 <button type="submit"  [disabled]="!form.dirty">Save</button>

la forme devient sale si vous changez une valeur en elle. 

Vérifiez ici pour plus de détails: https://angular.io/guide/forms enter image description here

7
Pranay Rana

Selon votre commentaire "Mais que se passe-t-il si j'efface 1 symbole en entrée puis le ré-efface (la valeur est la même, mais la forme a été modifiée)?" Je suggère cette solution.

L'idée générale est de stocker la valeur initiale du formulaire en tant qu'objet séparé (il suffit de le cloner). Créez ensuite une fonction booléenne qui consiste simplement à parcourir les valeurs-clés et à comparer les données mises à jour avec les données initiales. Ensuite, liez simplement le résultat de cette fonction à votre bouton d'envoi [disabled]="yourCheckMethod(form.value) ".

0
shohrukh

Vous pouvez l'essayer avec la propriété vierge comme ceci:

<button type="submit" [disabled]="form.pristine">Save</button>

Cette propriété vérifie si votre formulaire a changé depuis son chargement.

0
ochs.tobi