AngularJS <input> 유효성 확인 없음 <form>

Angular가 단일 양식의 유효성을 검사 할 수 있습니까? <input> 양식의 유효성을 검증하는 것과 비슷합니까? 나는 이런 식으로 생각하고있다.AngularJS <input> 유효성 확인 없음 <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>

위의 예는 효과가 없다. <form>에 동봉하고 ng-show을 ng-show="myForm.myInput.$error.maxlength"으로 대체하면 도움이됩니다.

<form>을 사용하지 않고이 작업을 수행 할 수 있습니까?

출처

2014-02-28 Wojtek

시도해 보셨습니까? 그렇다고 생각하지는 않습니다. Angular는 양식의 입력 상태를 추적하는 장면 뒤에 form.FormController를 만듭니다. 'valid \ invalid & dirty \ pristine'과 같은 것들입니다. http : // docs .angularjs.org/api/ng/type/form.FormController –

160

ng-form 각도 지시문 (see docs here)을 사용하여 HTML 양식 외부의 항목을 그룹화 할 수 있습니다. 그런 다음 각형 FormController를 활용할 수 있습니다.

<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

출처

2014-08-16 18:30:45

예를 따라 plunker : http://plnkr.co/edit/QJ7Qps?p=preview –

이 대답을 수락했습니다. 그게 내가 뭘 찾고 있었는지, 비록 대답이 조금 늦게 왔지만 : – Wojtek

이것은 나를 도왔다. 나는 머리카락을 꺼내서 이걸 비틀었다. 고맙습니다! –

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

출처

2015-01-08 11:38:08

http://stackoverflow.com/a/25342654/2333214와 다른 점이 있습니까? 그렇다면 어떻게 다른지 설명을 추가 할 수 있습니까? –

건물 실비오 루카스의 대답에, 당신은 루프에서 반복 및 양식 이름과 유효한 상태 보간 할 수 있어야하는 경우 :

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

을

출처

2015-03-16 14:38:09 Blaskovicz

AngularJS <input> 유효성 확인 없음 <form>

답변

관련 문제