2015-02-17 4 views
5

Я пытаюсь использовать проверки в форме углов в моей форме для сообщения в блоге, а точнее, в форме, запрещенной ng. По причинам я не могу понять, что кнопка отправки не отключена, где она должна быть, если все три поля ввода действительны. Спасибо за помощь.Угловая форма проверки ng-disabled не работает

это мой шаблон блога

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

Вот мой 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> 

Это мой контроллер блог

angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) { 
    'use strict' 
}); 
+0

А где ваш код, который устанавливает $ недопустимое значение? –

+0

Создайте модуль как 'angular.module ('Teewinot', [])'. Передайте пустой массив функции модуля. А также используйте 'ng-model' для каждого входа. – Saad

ответ

20

Вы упускаете ng-model на каждое поле вашей формы. Имейте в виду, когда вы упоминаете ng-model на любом поле формы в то время ng-model создает дополнительные объекты внутри объекта имя формы с этой конкретной name атрибута, которые затем рассматриваются в то время как форма проверки, как $error, $valid, $invalid и т.д.

в качестве формы name is blgoPost, когда угловая компиляция этой страницы, она внутренне создает объект в области имени blgoPost. И все поля ввода, которые name & ng-model назначают им, добавляются внутрь этого объекта blgoPost. Но если вы не укажете ng-model на поля формы, он никогда не будет добавлен внутри объекта формы .

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

Смежные вопросы