ng-repeat、ng-show（angular）を使用して動的に作成された入力を検証する方法
Ng-repeatを使って作成したテーブルがあります。テーブルの各要素に検証を追加します。問題は、各入力セルがその上下のセルと同じ名前を持つことです。 {{$index}}値を使用して入力に名前を付けようとしましたが、HTMLの文字列リテラルは正しいように見えますが、現在は機能しています。
これが現在の私のコードです。
<tr ng-repeat="r in model.BSM ">
<td>
<input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
<span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
</td>
</tr>
私はインデックスから{{}}を削除しようとしました、しかしそれはまた働きません。現在のところ、入力の検証プロパティは正しく機能していますが、エラーメッセージは表示されません。
何か提案がありますか？
編集：以下のすばらしい答えに加えて、この問題をより詳細に説明したブログ記事があります。 http：// www .thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /
AngularJSは入力名に依存して検証エラーを公開します。
残念ながら、今日の時点では、（カスタムディレクティブを使用せずに）入力の名前を動的に生成することはできません。実際、 input docs をチェックすると、name属性が文字列だけを受け付けることがわかります。
'動的な名前'の問題を解決するには、内部フォームを作成する必要があります（ ng-form を参照）：
<div ng-repeat="social in formData.socials">
<ng-form name="urlForm">
<input type="url" name="socialUrl" ng-model="social.url">
<span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
</ng-form>
</div>
他の選択肢はこれのためのカスタムディレクティブを書くことです。
これがngFormの使い方を示すjsFiddleです。 http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/
質問が行われて以来、Angularチームは入力名を動的に作成することを可能にすることでこの問題を解決しました。
Angularバージョン1.3以降を使用すると、これを実行できます。
<form name="vm.myForm" novalidate>
<div ng-repeat="p in vm.persons">
<input type="text" name="person_{{$index}}" ng-model="p" required>
<span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
</div>
</form>
Angular 1.3では、フォーム検証用のより強力なツールであるngMessagesも導入されました。 ngMessagesでも同じテクニックを使うことができます。
<form name="vm.myFormNgMsg" novalidate>
<div ng-repeat="p in vm.persons">
<input type="text" name="person_{{$index}}" ng-model="p" required>
<span ng-messages="vm.myFormNgMsg['person_' + $index].$error">
<span ng-message="required">Enter a name</span>
</span>
</div>
</form>
Ng-formを使いたくない場合は、フォームのname属性を変更するカスタムディレクティブを使うことができます。このディレクティブをng-modelと同じ要素の属性として配置します。
他のディレクティブを組み合わせて使用している場合は、「terminal」プロパティを設定しないと、この関数を実行できません（優先順位が-1の場合）。
たとえば、ng-optionsを指定してこのディレクティブを使用する場合は、次の1行のモンキーパッチを実行する必要があります。 https://github.com/AlJohri/bower-angular/commit/eb17a967b7973eb7fc1124b024aa8b3ca540a155
angular.module('app').directive('fieldNameHack', function() {
return {
restrict: 'A',
priority: -1,
require: ['ngModel'],
// the ngModelDirective has a priority of 0.
// priority is run in reverse order for postLink functions.
link: function (scope, iElement, iAttrs, ctrls) {
var name = iElement[0].name;
name = name.replace(/\{\{\$index\}\}/g, scope.$index);
var modelCtrl = ctrls[0];
modelCtrl.$name = name;
}
};
});
多くの場合、ng-initを使用して$ indexを変数名に設定すると便利です。例えば：
<fieldset class='inputs' ng-repeat="question questions" ng-init="qIndex = $index">
これにより、正規表現は次のように変わります。
name = name.replace(/\{\{qIndex\}\}/g, scope.qIndex);
複数の入れ子になったng-repeatがある場合は、$ parent。$ indexの代わりにこれらの変数名を使用できます。
ディレクティブの "terminal"と "priority"の定義： https://docs.angularjs.org/api/ng/service/ $ compile＃directive-definition-object
Ng-option monkeypatchの必要性に関するGithubのコメント： https://github.com/angular/angular.js/commit/9ee2cdff44e7d496774b340de816344126c457b3#commitcomment-6832095https://Twitter.com/） aljohri/status/482963541520314369
更新：
Ng-formでもこれを機能させることができます。
angular.module('app').directive('formNameHack', function() {
return {
restrict: 'A',
priority: 0,
require: ['form'],
compile: function() {
return {
pre: function(scope, iElement, iAttrs, ctrls) {
var parentForm = $(iElement).parent().controller('form');
if (parentForm) {
var formCtrl = ctrls[0];
delete parentForm[formCtrl.$name];
formCtrl.$name = formCtrl.$name.replace(/\{\{\$index\}\}/g, scope.$index);
parentForm[formCtrl.$name] = formCtrl;
}
}
}
}
};
});
Ng-repeatディレクティブを使用しているタグ内でng-formディレクティブを使用します。その後、ng-formディレクティブによって作成されたスコープを使用して総称名を参照できます。例えば：
<div class="form-group col-sm-6" data-ng-form="subForm" data-ng-repeat="field in justificationInfo.justifications"">
<label for="{{field.label}}"><h3>{{field.label}}</h3></label>
<i class="icon-valid" data-ng-show="subForm.input.$dirty && subForm.input.$valid"></i>
<i class="icon-invalid" data-ng-show="subForm.input.$dirty && subForm.input.$invalid"></i>
<textarea placeholder="{{field.placeholder}}" class="form-control" id="{{field.label}}" name="input" type="text" rows="3" data-ng-model="field.value" required>{{field.value}}</textarea>
</div>
クレジットに： http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html
コントローラー側に「カスタム検証」を使ったより複雑な例を追加しました http://jsfiddle.net/82PX4/3/
<div class='line' ng-repeat='line in ranges' ng-form='lineForm'>
low: <input type='text'
name='low'
ng-pattern='/^\d+$/'
ng-change="lowChanged(this, $index)" ng-model='line.low' />
up: <input type='text'
name='up'
ng-pattern='/^\d+$/'
ng-change="upChanged(this, $index)"
ng-model='line.up' />
<a href ng-if='!$first' ng-click='removeRange($index)'>Delete</a>
<div class='error' ng-show='lineForm.$error.pattern'>
Must be a number.
</div>
<div class='error' ng-show='lineForm.$error.range'>
Low must be less the Up.
</div>
</div>
次の構文scope.step3Form['item[107][quantity]'].$touchedを使用している場合、検証はngリピートで機能します
<tr ng-repeat="item in items">
<td>
<div class="form-group">
<input type="text" ng-model="item.quantity" name="item[<% item.id%>][quantity]" required="" class="form-control" placeholder = "# of Units" />
<span ng-show="step3Form.$submitted || step3Form['item[<% item.id %>][quantity]'].$touched">
<span class="help-block" ng-show="step3Form['item[<% item.id %>][quantity]'].$error.required"> # of Units is required.</span>
</span>
</div>
</td>
</tr>
手遅れですが、誰かに役立つ可能性があります
- すべてのコントロールに固有の名前を付ける
fromname[uniquname].$errorを使用して検証する
サンプルコード
<input
ng-model="r.QTY"
class="span1"
name="QTY{{$index}}"
ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<div ng-messages="formName['QTY' +$index].$error"
ng-show="formName['QTY' +$index].$dirty || formName.$submitted">
<div ng-message="required" class='error'>Required</div>
<div ng-message="pattern" class='error'>Invalid Pattern</div>
</div>
Working デモはこちら
Pkozlowski.opensourceの answer を基にして、動的入力名を--- ngMessages と併用する方法を追加しました。 ng-init要素のng-form部分とfurryNameの使用に注意してください。 furryNameは、inputのname属性の変数値を含む変数名になります。
<ion-item ng-repeat="animal in creatures track by $index">
<ng-form name="animalsForm" ng-init="furryName = 'furry' + $index">
<!-- animal is furry toggle buttons -->
<input id="furryRadio{{$index}}"
type="radio"
name="{{furryName}}"
ng-model="animal.isFurry"
ng-value="radioBoolValues.boolTrue"
required
>
<label for="furryRadio{{$index}}">Furry</label>
<input id="hairlessRadio{{$index}}"
name="{{furryName}}"
type="radio"
ng-model="animal.isFurry"
ng-value="radioBoolValues.boolFalse"
required
>
<label for="hairlessRadio{{$index}}">Hairless</label>
<div ng-messages="animalsForm[furryName].$error"
class="form-errors"
ng-show="animalsForm[furryName].$invalid && sectionForm.$submitted">
<div ng-messages-include="client/views/partials/form-errors.ng.html"></div>
</div>
</ng-form>
</ion-item>
これらの解決策を見てみると、上記のAl Johriによって提供されたものが私のニーズに最も近いものですが、彼の指示は私が望んでいたよりも少しプログラマブルではありませんでした。これが彼の解決策の私のバージョンです：
angular.module("app", [])
.directive("dynamicFormName", function() {
return {
restrict: "A",
priority: 0,
require: ["form"],
compile: function() {
return {
pre: function preLink(scope, iElement, iAttrs, ctrls) {
var name = "field" + scope.$index;
if (iAttrs.dnfnNameExpression) {
name = scope.$eval(iAttrs.dnfnNameExpression);
}
var parentForm = iElement.parent().controller("form");
if (parentForm) {
var formCtrl = ctrls[0];
delete parentForm[formCtrl.$name];
formCtrl.$name = name;
parentForm[formCtrl.$name] = formCtrl;
}
}
}
}
};
});
このソリューションでは、名前ジェネレータ式をディレクティブに渡すだけで、彼が使用していたパターン置換へのロックを回避できます。
マークアップでの使用例が示されていないため、最初はこのソリューションで問題がありました。そのため、ここではその使用方法を示します。
<form name="theForm">
<div ng-repeat="field in fields">
<input type="number" ng-form name="theInput{{field.id}}" ng-model="field.value" dynamic-form-name dnfn-name-expression="'theInput' + field.id">
</div>
</form>
github に関するより完全な実用的な例があります。
これにより、ng-repeatの名前がフォームの検証とは別に表示されます。
<td>
<input ng-model="r.QTY" class="span1" name="{{'QTY' + $index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
</td>
しかし、バリデーションメッセージで検索するのに苦労したので、変数をオブジェクトキーとして解決するためにng-initを使用する必要がありました。
<td>
<input ng-model="r.QTY" class="span1" ng-init="name = 'QTY' + $index" name="{{name}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<span class="alert-error" ng-show="form[name].$error.pattern"><strong>Requires a number.</strong></span>
<span class="alert-error" ng-show="form[name].$error.required"><strong>*Required</strong></span>
ここで私がそうする方法の例は、私はそれが最善の解決策であるかどうかわからないが、完璧に動作します。
まず、HTMLでコードを書きます。 ng-classを見てください。hasError関数を呼んでいます。入力の名前宣言も見てください。私は異なる入力名を作成するために$インデックスを使います。
<div data-ng-repeat="tipo in currentObject.Tipo"
ng-class="{'has-error': hasError(planForm, 'TipoM', 'required', $index) || hasError(planForm, 'TipoM', 'maxlength', $index)}">
<input ng-model="tipo.Nombre" maxlength="100" required
name="{{'TipoM' + $index}}"/>
そして今、これがhasError関数です：
$scope.hasError = function (form, elementName, errorType, index) {
if (form == undefined
|| elementName == undefined
|| errorType == undefined
|| index == undefined)
return false;
var element = form[elementName + index];
return (element != null && element.$error[errorType] && element.$touched);
};
あなたのng-repeat $ indexを使うのがこんな風に動いたら
name="QTY{{$index}}"
そして
<td>
<input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-
pattern="/^[\d]*\.?[\d]*$/" required/>
<span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
<strong>Requires a number.</strong></span>
<span class="alert-error" ng-show="form['QTY' + $index].$error.required">
<strong>*Required</strong></span>
</td>
ng-showをng-patternで表示する必要があります
<span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
<span class="alert-error" ng-show="form['QTY' + $index].$error.required">
私の要求は元の質問で求められたものとは少し異なっていましたが、うまくいけば私は私と同じ問題を経験している誰かを助けるかもしれません。
フィールドが必須かどうかをスコープ変数に基づいて定義する必要がありました。そのため、基本的にng-required="myScopeVariable"（ブール変数）を設定する必要がありました。
<div class="align-left" ng-repeat="schema in schemas">
<input type="text" ng-required="schema.Required" />
</div>
それは可能であり、これが私が入力の表を使って同じことをする方法です。
そのような形でテーブルをラップする
それからちょうどこれを使う
すべて入力、選択などを含む、複数のネストされたディレクティブを含むフォームがあります。これらの要素はすべてng-repeatsと動的な文字列値で囲まれています。
これはディレクティブの使い方です。
<form name="myFormName">
<nested directives of many levels>
<your table here>
<perhaps a td here>
ex: <input ng-repeat=(index, variable) in variables" type="text"
my-name="{{ variable.name + '/' + 'myFormName' }}"
ng-model="variable.name" required />
ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
my-name="{{ variable.name + index + '/' + 'myFormName' }}"
</select>
</form>
注意：入力のテーブルをシリアル化する必要がある場合は、文字列連結に追加してインデックスを付けることができます。それが私がしたことです。
app.directive('myName', function(){
var myNameError = "myName directive error: "
return {
restrict:'A', // Declares an Attributes Directive.
require: 'ngModel', // ngModelController.
link: function( scope, elem, attrs, ngModel ){
if( !ngModel ){ return } // no ngModel exists for this element
// check myName input for proper formatting ex. something/something
checkInputFormat(attrs);
var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
assignInputNameToInputModel(inputName, ngModel);
var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
findForm(formName, ngModel, scope);
} // end link
} // end return
function checkInputFormat(attrs){
if( !/\w\/\w/.test(attrs.rsName )){
throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
}
}
function assignInputNameToInputModel(inputName, ngModel){
ngModel.$name = inputName
}
function addInputNameToForm(formName, ngModel, scope){
scope[formName][ngModel.$name] = ngModel; return
}
function findForm(formName, ngModel, scope){
if( !scope ){ // ran out of scope before finding scope[formName]
throw myNameError + "<Form> element named " + formName + " could not be found."
}
if( formName in scope){ // found scope[formName]
addInputNameToForm(formName, ngModel, scope)
return
}
findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
}
});
これは、フォームがどこになるのか分からないような多くの状況を処理するはずです。あるいは、フォームを入れ子にしているかもしれませんが、何らかの理由でこの入力名を2つのフォームに追加したいですか。それでは、入力名を付けたいフォーム名を渡してください。
私が欲しかったのは、私が決して知ることができなかった入力に動的な値を代入する方法で、それから$ scope.myFormName。$ validを呼び出すだけでした。
他にも、テーブルを追加したり、フォームの入力を追加したり、入れ子になったフォームを追加したりできます。入力を検証したいフォーム名を渡すだけです。次にフォーム送信時に$ scope.yourFormName。$ validが有効かどうかを尋ねます。