2015-12-15 15 views
13

角型の繰り返しセクションのカスタムバリデーターを作成しようとしました。角度形式のカスタム繰り返しセクションの複数のフィールドでの検証

フォームは、パーセント入力の合計が100の場合にのみ有効です。したがって、例えば、セクションが2つのフィールドが50と50の場合、有効なオプション、25と75などが必要です。

私はJSbinに取り組んでいましたが、繰り返しモデルが実際には更新されていないことがわかりましたonKeydown。したがって、繰り返しセクションの値をすべて繰り返してその合計を計算することはできません。

私もmodelOptions: { updateOn: 'Keydown' }で試してみましたが、成功しませんでした。実際にはバリデーターはまったく呼び出されません。


UPDATE

私は、一致するフィールドの例から、次の解決策を考え出しました。 残念ながら、その例には問題があるようです。

次のJSbinで再生し、バリデーターが呼び出されてtrueを返すが、フィールド/フィールドがまだ赤色(問題があることを示す)のままである場合が多いことを参照してください。

ここにはJSBinがあります。

+0

あなたは試してみてください: 'modelOptions:{allowInvalid:真}' – kentcdodds

+0

@kentcdoddsは、それはまだ例の作業を行うことはありません。 –

答えて

2

謝罪をすべてイベント名を受け入れます。 GitHubには2ヶ月間でopen issueがあります。 7.1.2バージョンの角形を使用して一時的に修正し、ただ更新を待っていました。私が質問に持っているJSBの更新版がうまくいくはずです。

UPDATE

私は時間を持っていたと私はタフな私は他の誰かがこのために探している場合にはそれを投稿する必要があり(もちろんのハック方法で)繰り返しセクションでこれを固定しているため。

(注:ソリューションがformlyバージョンに依存しない)

Working JSBin

1

Keydownkが期待通りにその作業をタイプミス固定した後、small caseの代わりに、大文字でなければなりませんmodelOptions: { updateOn: 'Keydown' }を使用しているときには、タイプミスをしました。またngModelOptions等、KeyDownイベント、keyUpイベント、ぼかし、フォーカスのような小さな場合には、私は戻って、このいずれかで取得する時間を持っていなかったので

modelOptions: { updateOn: 'keydown' } 

Forked Plunkr

+0

申し訳ありませんが、期待どおりに機能していますか?それはモデルを更新していないので、バリデーターは起動しません。 –

0

独自のチェックを作成するには、最良の例ディレクティブuse-form-errorのために、再利用可能なコンポーネントを使用しています。

jsfiddleの例を見てください。

<div ng-form="testForm" use-form-error="sumNot100" use-error-expression="input_1+input_2+input_3!=100"> 
    <label>Sum of all input must be 100</label> 
    <br> 
    <label>Input 1</label> 
    <input ng-model="input_1" type="number" name="input_1"> 
    <label>Input 2</label> 
    <input ng-model="input_2" type="number" name="input_2"> 
    <label>Input 3</label> 
    <input ng-model="input_3" type="number" name="input_3"> 
    <div ng-messages="testForm.$error" class="errors"> 
    <div ng-message="sumNot100"> 
     Sum of all input not equal 100 
    </div> 
    </div> 
    <button ng-disabled="testForm.$invalid"> 
    Submit 
    </button> 
</div> 
+0

申し訳ありませんが、これは形式的にどのように関連していますか? –

+0

「角度形式」は「ngForm」を使用しているため、この解決策は「角度形式」にも適用できます。これは、決定がフォームの**有効性**を変更するために可能です。 –

+0

このソリューションをこのjsbinのリピートセクションにも適用できますか? https://jsbin.com/loyoxi/1/edit?js,output –

関連する問題