[解決済み] 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のよく文書化された機能ではありません。
関連
-
[解決済み] select 要素のデフォルト値を設定するための ng-option の使用方法
-
[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断!?
-
[解決済み] AngularJSで画像を表示する
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] AngularJSでチェックボックスの値のリストにバインドするにはどうすればいいですか?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] AngularJSのフォームにカスタム検証を追加するには?
-
[解決済み] AngularJSとng-repeatによるselectの初期化
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】typeerrorは、未定義のプロパティ'data'を読み取ることができません。
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] AngularJSのコントローラを指定する:ngControllerと$routeProviderを使用する利点
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する