कोणीय फॉर्म सत्यापन एनजी-अक्षम काम नहीं कर रहा

मैं ब्लॉग पोस्ट के लिए मेरे फॉर्म में कोणीय फॉर्म सत्यापन का उपयोग करने की कोशिश कर रहा हूं, और अधिक विशेष रूप से एक एनजी-अक्षम फ़ॉर्म। कारणों से मैं यह नहीं समझ सकता कि सबमिट बटन अक्षम नहीं है, जहां तक यह होना चाहिए जब तक कि सभी तीन इनपुट फ़ील्ड मान्य न हों। सहायता के लिए धन्यवाद।कोणीय फॉर्म सत्यापन एनजी-अक्षम काम नहीं कर रहा

इस

<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' 
});

स्रोत

2015-02-17 Billy

और जहां अपने कोड है कि $ अमान्य मान सेट है? –

मॉड्यूल को 'angular.module (' Teewinot ', []) के रूप में इंस्टेंट करें। मॉड्यूल फ़ंक्शन में एक खाली सरणी पास करें। और, प्रत्येक इनपुट के लिए 'एनजी-मॉडल' का भी उपयोग करें। – Saad

आप भूल रहे हैं है आपके फॉर्म के हर क्षेत्र पर ng-model। उस समय ng-model कि विशिष्ट name विशेषता के साथ प्रपत्र नाम ऑब्जेक्ट के अंदर अतिरिक्त वस्तुओं जो तब जबकि माना बनाता है पर किसी भी रूप मैदान पर ध्यान रखें जब आप ng-model उल्लेख फ़ॉर्म सत्यापन $error, $valid, $invalid, आदि

आपके प्रपत्र के रूप में की तरह nameblgoPost है, जब कोणीय इस पृष्ठ को संकलित करता है, यह आंतरिक रूप से blgoPost के नाम के दायरे में वस्तु बनाता है। और सभी इनपुट फ़ील्ड जिनमें name & ng-model उन्हें blgoPost ऑब्जेक्ट के अंदर जोड़ा जाता है। लेकिन यदि आप फॉर्म फ़ील्ड में ng-model का उल्लेख नहीं करते हैं तो यह blgoPost फ़ॉर्म ऑब्जेक्ट के अंदर कभी भी जोड़ा नहीं जाएगा।

एचटीएमएल

<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

स्रोत

2015-02-17 19:33:22

कोणीय फॉर्म सत्यापन एनजी-अक्षम काम नहीं कर रहा

उत्तर

संबंधित मुद्दे