代码之家 › 专栏 › 技术社区 › juliano.net

做不到form.name.$无效和form.name.$error.required 工作

angularjs

juliano.net · 技术社区 · 6 年前

<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

当输入为空时(当用户单击submit按钮就足够了),我需要显示一个div,但是什么也没有发生。

<div> 当输入为空时?

3 回复 | 直到 6 年前

Kalyan 6 年前

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 />

Himesh Suthar 6 年前

Here i have updated the plunker

你应该使用 ng-model 使用角度验证。我在plunker中更新了这个。如果您想使用默认的html必填字段验证,您应该使用 ng-submit 形式元素上的直接反应

acesaft Muhammad Usman 6 年前

您必须将窗体的名称更改为“mForm”。在要显示的div上,必须检查name字段是否无效以及表单是否已提交。

<!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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前