角表单验证NG-禁用不工作 [英] Angular form validation ng-disabled not working
问题描述
我想使用的角度表单验证我的形式，博客文章，并且更具体地是NG-禁用的形式。至于原因，我无法弄清楚未禁用按钮，在那里，它应该是，除非所有三个输入字段是有效的提交。谢谢您的帮助。
这是我的博客模板
＆LT; DIV NG控制器='BlgoCtrl'＆GT;
＆LT; DIV CLASS ='集装箱'＆GT;
＆LT; H1＆GT; Teewinot Blgo＆LT; / H1＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS ='COL-MD-12'＆GT;
＆LT;形式的作用=形式的名字='blgoPost'NOVALIDATE＆GT;
＆LT; DIV CLASS ='的形式组'＆GT;
＆LT;标签='blgoTitle'＆GT;标题＆LT; /标签＆gt;
＆LT;输入名称=标题类型=题类='的形式控制'占位符=所需＆GT未来技术;＆LT; BR＆GT;
＆LT;标签='blgoContent'＆gt;内容＆LT; /标签＆gt;
＆LT; textarea的名字='内容'行=8TYPE =内容类='的形式控制'占位符='未来的技术创新将是多样化和影响力对个人......需要＆GT ;＆LT; / textarea的＆GT;＆LT; BR＆GT;
＆LT;标签='blgoPass code'＆GT;通code＆LT; /标签＆gt;
＆LT;输入名称='通code'型=通code类='的形式控制 placeholder='•••••••••••••••'要求＆GT;＆LT; BR＆GT;
＆LT;按钮式=提交类='BTN BTN-小学'NG-禁用=$ blgoPost无效。＆GT;提交邮政和LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
下面是我的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; Teewinot＆LT; /标题＆GT; ＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT; ＆LT;脚本SRC =bower_components / jQuery的/距离/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =bower_components /引导/距离/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
＆LT;脚本SRC =bower_components /角路由/角route.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =bower_components /引导/距离/ CSS / bootstrap.css的rel =stylesheet属性＆GT;＆LT; /头＆GT;＆LT;机身NG-应用=Teewinot＆GT;
＆LT; NG-包括SRC =应用程序/模板/谐音/ navbar.html'＆GT;＆LT; / NG-包括＆GT;＆LT; NG-视图＆gt;＆LT; / NG-视图＆gt;
＆所述;！ - 角模块确定指标和reoutes - ＆GT;
＆LT;脚本SRC =应用程序/ JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/ JS / routes.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 控制器 - ＆GT;
＆LT;脚本SRC =应用程序/ JS /控制器/ blog.controller.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
这是我的博客控制器
angular.module（'Teewinot'）。控制器（'BlgoCtrl'，函数（$范围，$ HTTP）{
使用严格
}）;
您错过 NG-模型在表单的各个领域。请记住，当你提到 NG-模型在那时 NG-模型任何形式的领域创建里面的额外的对象与该特定名称属性，然后考虑表格名称对象，而表单验证像 $误差， $有效， $无效等
随着你的表格名称是 blgoPost ，当角编译该页面时，它在内部创建范围内的对象 blgoPost 的名称。和所有的输入字段有名称＆安培; NG-模型分配给他们， blgoPost 对象中得到补充。但是，如果你不提 NG-模型来的表单字段，然后它永远不会在 blgoPost 表单中得到补充对象。
HTML
＆LT;形式的作用=形式的名字='blgoPost'NOVALIDATE =＆GT;
＆LT;输入名称=第一个/＆GT;
＆LT; DIV CLASS ='的形式组'＆GT;
＆LT;标签='blgoTitle'＆GT;标题＆LT; /标签＆gt;
＆LT;输入名称=标题类型=题类='的形式控制'NG模型=测试1占位符=所需=＆GT未来技术;
＆LT; BR＆GT;
＆LT;标签='blgoContent'＆gt;内容＆LT; /标签＆gt;
＆LT; textarea的名字='内容'行=8TYPE =内容NG模型=test2的类='的形式控制'占位符='未来的技术创新将是多样的和有影响力的个人。 .....'所需=＆GT;＆LT; / textarea的＆GT;
＆LT; BR＆GT;
＆LT;标签='blgoPass code'＆GT;通code＆LT; /标签＆gt;
＆LT;输入名称='通code'型=通codeNG-模式=TEST3类='的形式控制'占位符='和;＃8226;＆放大器;＃8226;＆安培; ＃8226所必需的'=/＆GT;
＆LT; BR /＆GT;
＆LT;按钮式=提交类='BTN BTN-小学'NG-禁用=$ blgoPost无效。＆GT;提交邮政和LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
I am trying to use the angular form validations in my form for a blog post, and more specifically a ng-disabled form. For reasons I cannot figure out the submit button is not disabled, where as it should be unless all three input fields are valid. Thanks for the help.
this is my blog template
<div ng-controller='BlgoCtrl'>
<div class='container'>
<h1> Teewinot Blgo</h1>
<div class="row">
<div class='col-md-12'>
<form role='form' name='blgoPost' novalidate>
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' placeholder='Technologies of the Future' required><br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required></textarea><br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" class='form-control' placeholder='•••••••••••••••' required><br>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
</div>
</div>
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teewinot</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular-route/angular-route.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-app="Teewinot">
<ng-include src="'app/templates/partials/navbar.html'"></ng-include>
<ng-view></ng-view>
<!-- angular module defintion and reoutes -->
<script src="app/js/app.js"></script>
<script src="app/js/routes.js"></script>
<!-- controllers -->
<script src="app/js/controllers/blog.controller.js"></script>
</body>
</html>
This is my blog controller
angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
'use strict'
});
You're missing ng-model on every field of your form. Keep in mind when you mention ng-model on any form field at that time ng-model creates the extra objects inside form name object with that specific name attribute which then considered while form validation like $error, $valid, $invalid, etc.
As your form name is blgoPost, when angular compile this page,it internally creates the object inside the scope of the name of blgoPost. And the all the input fields which has name & ng-model assign to them gets added inside that blgoPost object. But if you don't mention ng-model to the form fields then it will never get added inside the blgoPost form object.
HTML
<form role='form' name='blgoPost' novalidate="">
<input name="first" />
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
<br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
<br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='•••' required="" />
<br/>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
这篇关于角表单验证NG-禁用不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
