Как проверить поля в угловых JS (не пусто) - PullRequest
Новая
       1

Как проверить поля в угловых JS (не пусто)

0 голосов
/ 30 октября 2018

У меня есть несколько полей input, и я хочу проверить fields. Они не могут быть пустыми, когда пользователь нажимает кнопку submit. Как я покажу border red, когда пользователь нажмет на кнопку, если поля пусты.

вот мой код http://plnkr.co/edit/XtnSdO9ARpHdn9RZotMt?p=info

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [
    {
      name:'abc'
    },
    {
      name:'pqr'
    }
    ];

    $scope.onclick =function(){

      console.log($scope.c)
    }

});

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Прежде всего, вам нужно поместить все поля ввода внутри тега формы. Как это: 

<form ng-submit="onclick()">
  <button type="submit">submit</button>
  <li ng-repeat="x in c">
    <input type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}" required="true"/>
   </li>
</form>

Для входных данных вам нужно установить свойство required = "true" (или angular ng-required, если вам нужны условные значения). Кнопка Sumbit должна иметь type = "submit" (чтобы он инициировал отправку формы). Функция отправки должна быть перемещена от нажатия кнопки до свойства формы ng-submit = "onclick ()".

Этот пример уже будет работать с собственными сообщениями проверки html5. Если вы хотите добавить пользовательские стили, входные данные, которые не являются допустимыми, будут иметь класс css ('ng-invalid').

0 голосов
/ 30 октября 2018

Лучше всего использовать атрибут required в ваших полях. Но вы можете выполнить ручную проверку с помощью директивы. Вам просто нужно обернуть свои входные данные в <form>. Эта директива может быть расширена для выполнения любой проверки. Вот пример одного: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [{
    name: 'abc'
  }, {
    name: 'pqr'
  }];

  $scope.onclick = function() {
    console.log($scope.c)
  }
});

app.directive("emptyValidator", function($q, $timeout) {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {

      ctrl.$validators.empty = function(modelValue, viewValue) {
        if (!ctrl.$isEmpty(modelValue)) {
          return true;
        }
        return false;
      }
    }
  };
});
.red-border {
  border: 2px solid red;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form name="formName" ng-submit="onclick()">
      <p>Hello {{name}}!</p>
      <button type="submit">submit</button>

      <ul>
        <li ng-repeat="x in c">
          <ng-form name="innerForm">
            <input type="text" name="inputName" ng-model='x.name' empty-validator ng-class="{'red-border' : innerForm.inputName.$error.empty}" />
          </ng-form>
        </li>
      </ul>

    </form>

  </div>

</body>

</html>

Однако , вы запросили странный запрос для проверки его нажатием одной кнопки, поэтому вы можете захотеть сделать это в самой функции. Что не является правильным способом проверки, но все же можно сделать. Вот пример этого: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [{
    name: 'abc'
  }, {
    name: 'pqr'
  }];
  $scope.d = [false, false];

  $scope.onclick = function() {
    var f = false;
    for (var i = 0; i < $scope.c.length; i++) {
      if (!$scope.c[i].name) {
        $scope.d[i] = true;
        f = true;
      } else {
        $scope.d[i] = false;
      }
    }
    if (f) {
      return false;
    }
    console.log($scope.c)
  }
});
.red-border {
  border: 2px solid red;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="onclick()">
      <p>Hello {{name}}!</p>
      <button type="submit">submit</button>

      <ul>
        <li ng-repeat="x in c">
          <input type="text" ng-model='x.name' ng-class="{'red-border' : d[$index]}" />
        </li>
      </ul>

    </form>

  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...