Angular 表单验证 ng-disabled 不起作用 [英] Angular form validation ng-disabled not working

查看：31
本文介绍了Angular 表单验证 ng-disabled 不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的表单中使用角度表单验证来撰写博客文章，更具体地说是禁用 ng 的表单.出于某些原因，我无法确定提交按钮没有被禁用，除非所有三个输入字段都有效，否则应该禁用.谢谢您的帮助.

这是我的博客模板

 
<div class='container'><h1>Teewinot Blgo</h1><div class="row">
<form role='form' name='blgoPost' novalidate>
<label for='blgoTitle'>Title</label><input name='title' type="title" class='form-control' placeholder='所需的未来技术'><br><label for='blgoContent'>Content</label><textarea name='content' rows='8' type="content" class='form-control' placeholder='未来的技术创新将是多样的，对个人的影响......' required></textarea><br><label for='blgoPassCode'>PassCode</label><input name='passcode' type="passcode" class='form-control' placeholder='&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;'需要><br><button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">提交帖子</button>
</表单>

这是我的 index.html

<html lang="zh-cn"><头><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"><body ng-app="Teewinot"><ng-include src="'app/templates/partials/navbar.html'"></ng-include><ng-view></ng-view><!-- angular 模块定义和路由--><script src="app/js/app.js"></script><script src="app/js/routes.js"></script><!-- 控制器--><script src="app/js/controllers/blog.controller.js"></script></html>

这是我的博客控制器

angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {'使用严格'});

解决方案

表单的每个字段都缺少 ng-model.请记住，当您在任何表单字段中提到 ng-model 时，ng-model 会在表单名称对象中创建具有该特定 name 属性，例如 $error、$valid、$invalid 等

由于你的表单name是blgoPost，当angular编译这个页面时，它内部会在blgoPost的名字范围内创建对象.以及所有具有 name & 的输入字段ng-model 分配给它们被添加到 blgoPost 对象中.但是，如果您没有在表单字段中提及 ng-model，那么它将永远不会被添加到 blgoPost 表单对象中.

HTML

<input name="first"/>
<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='未来的技术创新将是多样的，对个人的影响很大......' required=""></textarea><br><label for='blgoPassCode'>PassCode</label><input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='&#8226;&#8226;&#8226' required=""/><br/><button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">提交帖子</button>
</表单>

工作小提琴

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='&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;' 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='&#8226;&#8226;&#8226' required="" />
        <br/>
        <button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
    </div>
</form>

Working Fiddle

这篇关于Angular 表单验证 ng-disabled 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆