Не удается сделать form.name. $ Недействительным и form.name. $ Error.required работа - PullRequest
Новая
       1

Не удается сделать form.name. $ Недействительным и form.name. $ Error.required работа

0 голосов
/ 21 сентября 2018

Я пытаюсь использовать AngularJS для проверки формы со следующим кодом:

HTML 

<body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as ctrl">
      <form name="ctrl.mForm" novalidate>
        <input type="text" name="Name" required />
        <div ng-show="ctrl.mForm.Name.$invalid">Required</div>
        <input type="submit" ng-click="send()" />
      </form>
    </div>
  </body>

JS 

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  var vm = this;

  vm.send = function () {
    alert('ok');
  }
});

Plunker

Мне нужно показать div, когда ввод пуст (когда пользователь нажимает кнопку отправки достаточно), однако ничего не происходит.

Что не так с этим кодом, что онне может показать <div>, когда вход пуст?

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

Здесь я обновил плункер

Вы должны использовать ng-model для проверки с использованием угловых.Я обновил это в Plunker.и если вы хотите использовать проверку по умолчанию для обязательного html-поля, вы должны отправить форму, используя ng-submit, направленный на элемент формы

0 голосов
/ 21 сентября 2018

Вы должны изменить имя вашей формы на «mForm».И в div, который вы хотите показать, вы должны проверить, является ли поле имени недействительным и была ли отправлена ​​форма. 

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as ctrl">
      <form name="mForm" novalidate>
        <input type="text" ng-model="name" name="name" required />
        <div ng-show="mForm.name.$invalid && mForm.$submitted"">Required</div>
        <input type="submit" ng-click="send()" />
      </form>
    </div>
  </body>
</html>

См. Plunker

0 голосов
/ 21 сентября 2018

В вашем коде контроллера должна быть переменная для Name: 

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  var vm = this;

  vm.Name = "";
  vm.send = function () {
    alert('ok');
  }
});

, и ваш элемент управления вводом должен использовать эту переменную в ng-модели 

 <input type="text" name="Name" ng-model="Name" required />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...