AngularJS Validierung ohne umschließende <form>

Ist es in Angular möglich, eine einzelne, isolierte <input> in einer ähnlichen Weise zu validieren die Formulare validiert sind? Ich denke über so etwas:AngularJS Validierung ohne umschließende <form>

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

Das obige Beispiel funktioniert nicht. Es in <form> und das Ersetzen von ng-show durch ng-show="myForm.myInput.$error.maxlength" helfen, hilft.

Ist es möglich, dies ohne Verwendung von <form> zu tun?

Quelle

2014-02-28 Wojtek

Haben Sie es versucht? Ich glaube nicht, dass es ist, aber ich glaube, dass Angular einen 'form.FormController' hinter den Kulissen erstellt, der die Eingabezustände eines Formulars verfolgt, Dinge wie 'valid \ invalid & dirty \ pristine.' http: // docs .angularjs.org/api/ng/type/form.FormController –

160

Sie können die angular-Anweisung ng-form (see docs here) verwenden, um auch außerhalb eines HTML-Formulars etwas zu gruppieren. Dann können Sie den eckigen FormController nutzen.

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

Example

Quelle

2014-08-16 18:30:45

Folgen Sie einem Beispiel in Plunker: http://plnkr.co/edit/QJ7Qps?p=preview –

Akzeptiert diese Antwort. Das ist, was ich gesucht habe, obwohl die Antwort ein bisschen zu spät kam :) – Wojtek

Das hat mir auch geholfen. Ich zog mir die Haare aus und stolperte darüber. Vielen Dank! –

-1

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

Quelle

2015-01-08 11:38:08

Ist das etwas anderes als http://stackoverflow.com/a/25342654/2333214? Wenn ja, könnten Sie eine Erklärung hinzufügen, wie es sich unterscheidet? –

Aufbauend auf Silvio Lucas' Antwort, wenn Sie in einer Schleife iterieren und müssen in der Lage sein, Formularnamen und gültige Zustände zu interpolieren:

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

Quelle

2015-03-16 14:38:09 Blaskovicz

AngularJS Validierung ohne umschließende <form>

Antwort

Verwandte Themen