如何检测 angular 模式形式内的变化？

Question

我正在使用 angular schema form，我需要检测生成的元素何时被删除。

为了您的舒适，我做了一个 plunker： https://plnkr.co/edit/ogaO8MBmNtxYBPHR67NC?p=info

控制器文件：

   //model form
    vm.modelForm = {"beneficiaries":[]};

    /*
    ================
    schema
    ================
    */
    vm.schema = {
      "type": "object",
      "title": "Beneficiario",
      "required": [
        "beneficiaries"
      ],
      "properties": {
        "beneficiaries": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "name": {
                "type": "number",
                "description": "Monto a transferir",
                "minimum": 1,
                "maximum": 500,
                "validationMessage": {
                   101: "El valor de este campo debe ser de al menos {{schema.minimum}} Bs",
                   103: "{{viewValue}} Bs es mayor que el máximo permitido para una transferencia: {{schema.maximum}} Bs",
                   302: "Este campo es requerido"
                }
              },
              "spam": {
                "title": "Spam",
                "type": "boolean",
                "default": true
              },
              "comment": {
                "type": "string",
                "maxLength": 20,
                "validationMessage": "Cantidad máxima de carácteres excedida"
              }
            },
            "required": [
              "name",
              "comment"
            ]
          }
        }
      }
    };

    /*
    ===============
    form
    ===============
    */
    vm.form = [
      {
        "type": "help",
        "helpvalue": "<h4>Transferencias y pagos</h4><h5>Lista de elementos seleccionados</h5>"
      },
      {
        "key": "beneficiaries",
        "title": "Selección",
        "autocomplete": "off",
        "add": null,
        "style": {
          "add": "btn-success"
        },
        "items": [
          {
            "key": "beneficiaries[].name",
            "title": "Monto Bs",
            "feedback": false
          },
          {
            "key": "beneficiaries[].spam",
            "type": "checkbox",
            "title": "Agregar a pagos frecuentes",
            "condition": "model.beneficiaries[arrayIndex].name"
          },
          {
            "key": "beneficiaries[].description",
            "title": "Descripción",
            "feedback": false
          }
        ],
        "startEmpty": true
      },
      {
        "type": "submit",
        "style": "btn-success btn-block",
        "title": "Agregar"
      }
    ];

    //form data
    vm.elements = [
      {
        "idE":1,
        "name": "Elemento 1",
        "selected": false
      },
      {
        "idE":2,
        "name": "Elemento 2",
        "selected": false
      },
      {
        "idE":3,
        "name": "Elemento 3",
        "selected": false
      },
      {
        "idE":4,
        "name": "Elemento 4",
        "selected": false
      }
    ];


    //function to select a element to put it inside of form
    vm.select = function(){
      //active elements
      var actives = _.filter(vm.elements, function(element) { 
        return element.selected == true; 

      });

      vm.modelForm.beneficiaries = new Array(actives.length);

      _.forEach(actives, function(value, key) {
        vm.modelForm.beneficiaries[key] = {"spam":true};
      });

    };

    //watch schema form
    $scope.$watch(function(){
      return vm.modelForm.beneficiaries;
    }, function(newValue, oldValue){
      if(newValue === oldValue) {
       return;
      }
      console.log("change");
    });

如果我更改表单的模型，我可以检测到元素何时被删除，但是如果我尝试使用任何生成的元素中的 "x" 删除该表单的元素，则无法检测到是否模型已更改。

所以，看着 plunker，我试图通过 $watch 来检测表单模型的变化，但是如果我删除一个元素并点击 "X" 则什么也没有发生，我需要检测此操作何时完成。

Answer 1

引用很可能不会改变，因此您必须在 $watch 语句中使用第三个参数：

$scope.$watch(function () {
    return vm.modelForm.beneficiaries;
}, function (newValue, oldValue) {
    if (newValue === oldValue) {
        return;
    }
    console.log("change");
}, true);

,true 告诉它对对象进行完整遍历以检查它是否已更改。在此处查看 objectEquality：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

如何检测 angular 模式形式内的变化？

how to detect a change inside angular schema form?

angularjs

forms

schema

watch

angular-schema-form