Liaison bidirectionnelle au composant d'entrée avec AngularJS (1.6)

Question

Je possède un composant parent qui reçoit des données du serveur et doit créer un objet spécifique (et différent) qui sera envoyé au serveur à chaque mise à jour des informations. Contrôleur parent :

function ParentController() {
  this.$onInit = () => {
  // obtenir les données de l'utilisateur depuis le serveur
    this.userDataObject = {
      informationsUtilisateur: {
        prénom: response.data.firstName,
        nom: response.data.lastName,
      },
      informationsContact: {
        email: response.data.email,
        téléphone: response.data.phone
      }
    }
  }
    this.saveToDB = () => {
        httpPostCall(this.userDataObject);
    }
}

Chaque propriété des données est passée à un composant enfant qui est essentiellement un élément d'entrée (avec une logique d'affichage complexe, donc séparé dans un composant différent). Modèle parent :

L'enfant est un champ de saisie avec une liaison de données bidirectionnelle à la propriété pertinente de userDataObject :

bindings: {
    fieldValue: '=',
    saveValue: '&'
}

Ensuite, l'enfant lie la valeur du champ à la valeur de l'entrée via NgModel (en utilisant un texte de substitution si la valeur du champ est vide). La liaison de la valeur au modèle fonctionne correctement, donc les modifications des données du composant parent se produisent lorsque l'utilisateur fournit une entrée :

    OK

Cela fonctionne en ce sens qu'un changement dans l'entrée modifie buyerDataObject et ensuite lors de l'enregistrement met à jour la base de données.

Cependant, cela fonctionne également si aucun changement n'a été apporté à fieldValue, donc si l'utilisateur clique sur le bouton sans modifier la valeur, elle sera quand même enregistrée dans la base de données. Je souhaite trouver un moyen de déterminer si la valeur a changé.

J'ai essayé de sauvegarder la valeur de fieldValue dans une variable locale dans le composant enfant dans $onInit, mais cela renvoie undefined. Je peux surveiller la variable et sauvegarder la valeur initiale, mais préférerais éviter d'ajouter des watchers à l'équation. Il semble qu'il devrait y avoir une manière plus directe de résoudre ce problème.

Answer 1

Si vous enveloppez vos champs de saisie dans une balise de formulaire et que vous les liez à votre contrôleur

Vous pouvez ensuite obtenir des informations utiles sur la modification des données du champ dans votre contrôleur. Ainsi, vous pourriez modifier votre méthode de sauvegarde comme ceci

    this.saveToDB = () => {
        if($ctrl.anyFormName.$dirty) {
            httpPostCall(this.userDataObject);
        }
    }

Ou vous pourriez simplement désactiver votre bouton de sauvegarde jusqu'à ce que le formulaire ait été modifié.

OK

Vous pouvez trouver toutes les propriétés de formulaire angulaire ici: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Vous pouvez également utiliser ces méthodes pour définir votre formulaire comme étant immaculé après l'avoir prérempli avec des données.