AngularJS <input> बिना किसी संलग्नक के <सत्यापन> फॉर्म

क्या एक एकल को मान्य करने के लिए एंगुलर में संभव है, <input>इसी तरह से अलग-थलग रूपों को मान्य किया जाता है? मैं कुछ इस तरह के बारे में सोच रहा हूँ:

<div class="form-group">
    <input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
    <span class="error" ng-show="myInput.$error.maxlength">Too long!</span>
</div>

ऊपर दिया गया उदाहरण काम नहीं करता है। इसमें संलग्न करना <form>और मदद करने के ng-showसाथ प्रतिस्थापित करना ng-show="myForm.myInput.$error.maxlength"।

क्या बिना उपयोग के ऐसा करना संभव है <form>?

angularjs validation

— Wojtek
स्रोत

या तुमने कोशिश की? मुझे नहीं लगता कि यह यह है, मेरा मानना है कि कोणीय एक बनाता form.FormControllerदृश्यों कि एक फार्म के इनपुट राज्यों, जैसी चीजों का ट्रैक रखता पीछे valid\invalid & dirty\pristine. docs.angularjs.org/api/ng/type/form.FormController

— meconroy

जवाबों:

184

आप HTML फॉर्म के बाहर भी कुछ भी समूह करने के लिए एनजी-फॉर्म कोणीय निर्देश ( यहां डॉक्स देखें ) का उपयोग कर सकते हैं । फिर, आप कोणीय फॉर्मकंट्रोलर से लाभ ले सकते हैं।

<div class="form-group" ng-form name="myForm">
    <input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
    <span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>

उदाहरण

— सिल्वियो लुकास
स्रोत

इस उत्तर को स्वीकार किया। यही कारण है कि मैं देख रहा था, हालांकि जवाब थोड़ा देर से आया :)

— Wojtek

इससे मुझे भी मदद मिली। मैं अपने बालों को बाहर खींच रहा था और इस पर ठोकर खाई। धन्यवाद!

— एलेक्स मैककेबे

भविष्य के पाठकों के लिए जो एक बटन के एनजी-क्लिक इवेंट पर इस तरह के फॉर्म को मान्य करना चाहते हैं, यहां देखें: stackoverflow.com/a/24123379/1371408

— मैटी जे

व्यक्तिगत सत्यापन के साथ कई इनपुट उदाहरण plnkr.co/edit/wuOExkq4LXEiDELm2C6E?p=preview

— नाथन रेडब्लाउर

@SilvioLucas - आपका उदाहरण अभी भी "निष्पादित" है, भले ही फ़ील्ड खाली हो ...?

— २२:२१

सिल्वियो लुकास के उत्तर पर निर्माण, यदि आप एक लूप में पुनरावृत्ति कर रहे हैं और प्रपत्र नाम और मान्य राज्यों को इंटरपोल करने में सक्षम होने की आवश्यकता है:

<div
  name="{{propertyName}}"
  ng-form=""
  class="property-edit-view"
  ng-class="{
    'has-error': {{propertyName}}.editBox.$invalid,
    'has-success':
      {{propertyName}}.editBox.$valid &&
      {{propertyName}}.editBox.$dirty &&
      propertyValue.length !== 0
  }"
  ng-switch="schema.type">
  <input
    name="editBox"
    ng-switch-when="int"
    type="number"
    ng-model="propertyValue"
    ng-pattern="/^[0-9]+$/"
    class="form-control">
  <input
    name="editBox"
    ng-switch-default=""
    type="text"
    ng-model="propertyValue"
    class="form-control">
  <span class="property-type" ng-bind="schema.type"></span>
</div>

— Blaskovicz
स्रोत

-4

<!DOCTYPE html>
<html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">   </script>

</head>

<body ng-controller="MainCtrl">
    <div class="help-block error" ng-show="test.field.$error.required">Required</div>
    <div class="help-block error" ng-show="test.firstName.$error.required">Name Required</div>
    <p>Hello {{name}}!</p>
    <div ng-form="test" id="test">
        <input type="text" name="firstName" ng-model="firstName" required> First name <br/> 
        <input id="field" name="field" required ng-model="field2" type="text"/>
    </div>
</body>
<script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.field = "name";
      $scope.firstName = "FirstName";
      $scope.execute = function() {
        alert('Executed!');
      }
    });

</script>

— पागल कोडर
स्रोत

क्या यह stackoverflow.com/a/25342654/2333214 से अलग है ? यदि हां, तो क्या आप एक स्पष्टीकरण जोड़ सकते हैं कि यह कैसे अलग है?

— TJ

और स्पष्टीकरण?

— मैक्सिमिलियानो बेकर्रा