Angulaire 2: désactiver le bouton s'il y a des changements dans la forme

Question

Je veux vérifier si au moins un champ de mon formulaire est modifié. Si ce scénario est vrai, le disableButton sera défini sur vrai, et faux s'il n'y a aucun changement dans le formulaire. Ci-dessous mon code actuel:

// this.hold is an array that temporary holds the previous values of 
// the form for comparison of the changes in form 

if(this.data.process == 'update') { 
    for(const f in form.value){ 
     if (form.value[f] == this.hold[f]) 
      this.disableButton = true; 
     else 
      this.disableButton = false; 
    } 
} 

Le problème est, le bouton désactive uniquement lorsque TOUS champs sont changés . Que dois-je ajouter dans mon état ou dans une boucle?

Answer 1

Ajoutez simplement une pause lorsque vous trouvez qu'une valeur est modifiée.

if(this.data.process == 'update') { 
    for(const f in form.value){ 
     if (form.value[f] == this.hold[f]){ 
      this.disableButton = true; 

     }  
     else{ 
      this.disableButton = false; 
      break; 
     } 

    } 
} 

Answer 2

Les pistes angulaires forment des valeurs de contrôle et définissent l'état sur dirty si l'une d'elles a été modifiée. Vous n'avez pas besoin de vérifier manuellement chaque contrôle. Il suffit d'utiliser .dirty propriété du formulaire:

this.disableButton = form.dirty; 

Si vous voulez exclure « retours en arrière » - ajouter puis enlever quelque chose, vous pouvez utiliser la méthode markAsPristine() pour définir le contrôle à pristine état lorsque la valeur qui a changé est le même que c'était initialement. Vous pouvez avoir l'objet de valeurs initiales:

const initialValues = {prop: 3}; 
form.valueChanges.subscribe((changes)=>{ 
    for (prop in changes) { 
     if (changes[prop] === initialValues[prop]) { 
      form.get(prop).markAsPristine(); 
     } 
    } 
}); 

Answer 3

La propriété pristine (ou la propriété dirty inverse) est ce que vous êtes après. Il est défini sur la classe AbstractControl et indique si des modifications ont été apportées à votre FormControl, FormGroup ou FormArray.