web-dev-qa-db-ja.com

囲んでいる<form>のないAngularJS <input>検証

Angularで、フォームが検証されるのと同様の方法で、単一の分離された<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>を使用せずにこれを行うことは可能ですか？

angularjsvalidation
93
Wojtek

Ng-form angularディレクティブ（ こちらのドキュメントを参照 ）を使用して、htmlフォームの外部であってもすべてをグループ化できます。その後、angular 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>

例

179
Silvio Lucas

Silvio Lucasの答えに基づいて、ループで繰り返し処理を行い、フォーム名と有効な状態を補間できるようにする必要がある場合：

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