4

この通常の (name 属性はサーバーによって必要とされる) フォームが角度付きであり、検証を機能させる方法がわかりません。ng-show="TODO" には何を入力すればよいですか

http://jsfiddle.net/Xk3VB/7/

<div ng-app>
  <form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
    <div ng-repeat="variant in variants" ng-form="variant_form">
      <div>
        <label>Duration:</label>
        <input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
        <span ng-show="TODO">Duration required</span>
      </div>
      <div>
        <label>Price:</label>
        <input name="variants[{{$index}}][price]" ng-model="variant.price" />
        <span ng-show="TODO">Price required</span>
      </div>
    </div>
  </form>
</div>

ps: これはフォームの一部であり、より複雑です。

ありがとう

4

1 に答える 1

11

AngularJS は入力名に依存して検証エラーを公開します。

残念ながら、現在のところ、(カスタム ディレクティブを使用しないと) 入力の名前を動的に生成することはできません。確かに、入力ドキュメントを確認すると、name 属性が文字列のみを受け入れることがわかります。

簡単に言うと、動的に作成された入力を検証するには、 ng-formに依存する必要があります。何かのようなもの ：

<div ng-repeat="variant in variants" >
  <ng-form name="innerForm">
     <div>
        <label>Duration:</label>
        <input name="duration" ng-model="variant.duration" required />
        <span ng-show="innerForm.duration.$error.required">Duration required</span>
    </div>
    <div>
        <label>Price:</label>
        <input name="price" ng-model="variant.price" required/>
        <span  ng-show="innerForm.price.$error.required">Price required</span>
    </div>
  </ng-form>

ここで働くフィドル

UPDATE：あなたのサーバー側の要件に基づいて、なぜそのようなことをしないのですか：

<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />

非表示の入力はサーバーによって読み取られるものであり、他の入力はクライアント側の検証を行うために使用されます (後でサーバーによって破棄されます)。ハックのようなものですが、うまくいくはずです。

PS : 実際に送信する前に、フォームが有効であることを確認してください。ng-submitで実行できます

于 2013-11-08T13:32:58.237 に答える