1. ホーム
  2. angularjs

[解決済み] AngularJSによるフォームでの動的検証と名前付け

2023-02-05 05:17:39

質問

私はこのフォームを持っています。 http://jsfiddle.net/dfJeN/

見ての通り、入力に対する名前の値は静的に設定されています。

name="username"

で、フォームバリデーションは正常に動作します(何かを追加して入力からすべてのテキストを削除すると、テキストが表示される必要があります)。

次に、私は動的に名前の値を設定しようとします。 http://jsfiddle.net/jNWB8/

name="{input.name}"

そして、これをバリデーションに適用します。

login.{{input.name}}.$error.required

(このパターンはng-repeatで使用されます) しかし、私のフォームバリデーションは壊れています。私のブラウザでは正しく解釈されます(要素を検査すると、私はlogin.username.$error.requiredを見ました)。

任意のアイデア?

編集: コンソールでスコープをログに記録した後、どうやら

{{input.name}}

の式は補間されません。私のフォームには {{input.name}} 属性がありますが、ユーザ名がありません。

UPDATE: 1.3.0-rc.3 name="{{input.name}}" からは期待通りに動作するようになりました。 以下を参照してください。 #1404

どのように解決するのですか?

その方法では、やろうとしていることができない。

あなたがやろうとしていることが、ng-repeatのようなもので動的にフォームに要素を追加する必要があると仮定すると、ネストされた ng-form を使用して、これらの個々のアイテムの検証を可能にする必要があります。

<form name="outerForm">
<div ng-repeat="item in items">
   <ng-form name="innerForm">
      <input type="text" name="foo" ng-model="item.foo" />
      <span ng-show="innerForm.foo.$error.required">required</span>
   </ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>

悲しいことに、これはAngularのよく文書化された機能ではありません。