1

現在、次の問題に直面しています。

ngModelAngularディレクティブを使用してフォーム入力を検証したいと思います。

これらを $scope と一緒に使用すると、正常に機能します。
現在、controllerAs構文を使用すると、機能しません。

この問題は十分に文書化されていません。私が見つけることができる唯一のヘルプは、この記事です。

これが私のコードの小さな例です:

テンプレートはmyController を vm として呼び出されます

<form name="vm.signUpForm" ng-submit="vm.signup(vm.user)">

    <label for="name">Name</label>

      <input type="text"
                  class="form-control"
                  id="name"
                  name="name"
                  placeholder="Full name"
                  ng-model="vm.user.name"
                  ng-minlength="2" required />

    <div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
        <span ng-show="vm.signUpForm.name.$error.required">Please fill in your name</span>
        <span ng-show="vm.signUpForm.name.$error.minlength">A minimum of 2 [...]</span>
    </div>

[...]
</form>

$scopeフォームを検証するために使用する必要がありますか? それとも私は何かを逃しましたか？

前もって感謝します！

ソリューション:アンドリュー・グレイ

これを機能させるには、次の行を変更する必要がありました。

<form name="vm.signUpForm" ... >
<!-- To -->
<form name="signUpForm" ...>


<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<!-- To -->
<div ng-if="signUpForm.name.$invalid">

<span ng-show="vm.signUpForm.name.$error.required" ... >
<!-- To -->
<span ng-show="signUpForm.name.$error.required" ... >
4

1 に答える 1

4

vm.まず最初に、フォームには必要ありません。

<form novalidate name="someForm">
    <label>
        Some Text:
        <span class="danger-text" ng-if="someForm.someText.$invalid">
           ERROR!
        </span>
    </label>
    <input type="text" name="someField" />
</form>

それが機能する方法は、スコープに関連付けられていない検証オブジェクトがあることです。構文は、コントローラーのcontrollerAsインスタンスをスコープ変数としてスピンオフするだけです。

vm.フォームと子要素の名前から を削ってみてください。問題ありません。

于 2015-03-30T16:46:15.767 に答える