Xác thực AngularJS <input> mà không có <form> bao quanh

Có thể trong Angular để xác thực một đơn lẻ, cô lập <input>theo cách tương tự mà các biểu mẫu được xác thực không? Tôi đang nghĩ về điều gì đó như thế này:

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

Ví dụ trên không hoạt động. Bao bọc nó trong một <form>và thay thế ng-showbằng ng-show="myForm.myInput.$error.maxlength"trợ giúp.

Có thể làm điều này mà không cần sử dụng <form>?

angularjs validation

— Wojtek
nguồn

Bạn đã thử chưa? Tôi không nghĩ là như vậy, tôi tin rằng Angular tạo ra một form.FormControllerhậu trường giúp theo dõi các trạng thái đầu vào của một biểu mẫu, những thứ như valid\invalid & dirty\pristine. docs.angularjs.org/api/ng/type/form.FormController

— meconroy

Câu trả lời:

184

Bạn có thể sử dụng chỉ thị góc ng-form ( xem tài liệu tại đây ) để nhóm bất kỳ thứ gì, ngay cả bên ngoài một biểu mẫu html. Sau đó, bạn có thể tận dụng lợi thế từ FormController góc cạnh.

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

Thí dụ

— Silvio Lucas
nguồn

Đã chấp nhận câu trả lời này. Đó là những gì tôi đã được tìm kiếm, mặc dù câu trả lời đến một chút quá muộn :)

— Wojtek

Điều này đã giúp tôi ra ngoài. Tôi đang nhổ tóc và vấp phải điều này. Cảm ơn bạn!

— Alex McCabe

Đối với độc giả tương lai ai cũng muốn xác nhận như một biểu mẫu trên sự kiện ng nhấp chuột vào một nút, xem tại đây: stackoverflow.com/a/24123379/1371408

— Matty J

Nhiều đầu vào với các xác thực riêng lẻ, ví dụ plnkr.co/edit/wuOExkq4LXEiDELm2C6E?p=preview

— Nathan Redblur

@SilvioLucas - ví dụ của bạn vẫn "Thực thi" ngay cả khi trường trống ...?

— colmde

Dựa trên câu trả lời của Silvio Lucas, nếu bạn đang lặp lại trong một vòng lặp và cần có thể nội suy các tên biểu mẫu và trạng thái hợp lệ:

<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
nguồn

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

— lập trình viên điên cuồng
nguồn

Điều này có gì khác với stackoverflow.com/a/25342654/2333214 không? Nếu vậy, bạn có thể giải thích nó khác nhau như thế nào không?

— TJ

Và lời giải thích?

— Maximiliano Becerra