Как сделать проверку в angularjs, используя недействительные и нетронутые?Также как сделать сервисные звонки в угловых JS

Question

Какая польза от недействительных, нетронутых и т. Д. На странице angularjs. Как использовать их для проверки формы?

Answer 1

Требование 1:

В служебном файле

app.factory('CrusdService', function($http) {
  return {
    fetchAll: function() {
      return $http.get('https:\\localHost:5000\countries').then(
        function(response) {
          return response.data.data;
        },
        function(error) {
          return error;
        }
      );
    },
    add: function(data) {
      return $http.post('https:\\localHost:5000\country', data).then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    update: function(data) {
      var name = {
        "name": data.name
      };
      return $http.put('https:\\localHost:5000\country' + data._id, name).then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    activate: function(id) {
      return $http.put('https:\\localHost:5000\country' + id + '\activate').then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    deactivate: function(id) {
      return $http.put('https:\\localHost:5000\country' + id + '\deactivate').then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    }
  }
});

В файле контроллера

function countryList() {
  CrudeService.fecthAll().then(
    function(data) {
      $scope.countries = data;
    },
    function(data) {
      console.log('error');
    }
  );
}
countryList();

// insert within the method given for add country
CrudeService.add($scope.country).then(
  function(data) {
    countryList();
  },
  function(data) {
    console.log('error');
  }
);

// insert within the method given for update country
CrudeService.update($scope.country).then(
  function(data) {
    countryList();
  },
  function(data) {
    console.log('error');
  }
);

// insert within the method given for activate country
CrudeService.activate(itemsId).then(
  function(data) {
    countryList();
  },
  function(data) {
    console.log('error');
  }
);

// insert within the method given for deactivate country
CrudeService.deactivate(itemsId).then(
  function(data) {
    countryList();
  },
  function(data) {
    console.log('error');
  }
);

---

Требование 2:

фильтровать данные таблицы с помощью поля поиска

в html-файл добавить следующее содержимое:

В поле поиска введите ng-model="searchValue"
В ng-repeat = "data in country |.. | filter:searchValue"

---

Требование 3:

проверка и сообщение об ошибке

в html-файл добавить следующее содержимое:

<span class="error" ng-if="formname.inputname.$invalid">enter correct data</span>

для отключения кнопки сохранения и обновления во всплывающем окне

сохранить - ng-disabled="formname.inputname.$invalid || formname.inputname.$pristine"
обновление - ng-disabled="formname.inputname.$invalid || formname.inputname.$pristine"