165
rated 0 times
[
172]
[
7]
/ answers: 1 / hits: 30756
/ 9 Years ago, tue, february 17, 2015, 12:00:00
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'
});
More From » html
