4

このような形をして

    <div ng-controller="FormController as f_ctrl">
    <form ng-submit="f_ctrl.submit()" name="myForm">
    <input type="text" ng-model="f_ctrl.user.username"
            required
            ng-minlength="4"/>
    <input type="text" ng-model="f_ctrl.user.password"/>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid">
    </form>
</div>

などのコントローラー

    .controller('FormController', [function() {
    var self = this;

    self.submit = function() {
        console.log('User submitted form with ' + self.user.username)
    }
}]);

問題があります。ページが最初に読み込まれると、何かを入力し始める前であっても、すぐにユーザー名フィールドに赤い境界線が表示されます。最初の送信後にのみ、無効なフィールドを強調表示する必要があります。これを使用して行うことができますform.$invalidか?

4

3 に答える 3

3

そのためには $pristine を使用する必要があります。フォームコントローラーが変更されていない場合は true です。したがって、テキストボックスのデータを変更すると、false になります。

あなたのための小さな例。

<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
    <input id="passAnime" type="password" name="password" ng-model="user.password" class="form-control input-md" placeholder="Password" tabindex="5" ng-maxlength="25" ng-minlength="6" required>

    <span ng-show="userForm.password.$dirty && userForm.password.$invalid">
        <p ng-show="userForm.password.$error.required" class="error-messages">
             Your password is required.
        </p>
        <p ng-show="userForm.password.$error.minlength" class="error-messages">
            Your password is too short. Minimum 6 chars.
        </p>
        <p ng-show="userForm.password.$error.maxlength" class="error-messages">
            Your password is too long. Maximum 25 chars. 
        </p>
    </span>
</div>
于 2015-08-05T08:16:42.390 に答える
1

次の CSS を追加することで、デフォルトで赤い境界線を追加する入力フィールドのデフォルト スタイルを無効にすることができます。

input:required {
    -moz-box-shadow: none;
    box-shadow: none;
}

次に、フォームが送信されたときにフィールドを強調表示する場合は、フォームとフォーム フィールドに関連する name 属性があることを確認する必要があります。これを行うと、フィールドが有効かどうかを確認し、無効な場合にテキスト フィールドにクラスを適用できます。

<input type="text" name="username" ng-class="{ 'invalid-field' : f_ctrl.myForm.username.$invalid && !f_ctrl.myForm.username.$pristine }" required />

f_ctrl.myFormとf_ctrl.myform.usernameには、フォームまたはフィールドが無効かどうか、または任意の時点で変更されているかどうかを判断するために使用/チェックできる追加のプロパティがあります (例: f_ctrl.myform.username.$dirty ）。次の HTML を追加すると、これらのプロパティをページに表示できるようになります。

<div>
    <pre>{{f_ctrl.myForm | json}}</pre>
</div>

または、コントローラーからコンソールにself.myFormを出力して、そのプロパティを表示することもできます

console.log(self.myForm);
于 2016-08-19T15:55:04.847 に答える
1

Angular には、フォーム (またはフォーム フィールド) が(ユーザーが何かを入力した) かどうか、またはフォームが(blur イベントが入力でトリガーされた) かどうかを示すヘルパーがあります。このデモを参照してください。$dirty$touched

最初の送信後にのみ、無効なフィールドを強調表示する必要があります。

残念ながら、Angular はそれをサポートしていません。ただし、かなり簡単に自分で実装できます。

コントローラ

function FormController() {
  var vm = this;
  vm.submitAttempted = false;
  vm.submit = function(isValid) {
    if (isValid) {
      // do stuff
    }
    else {
      vm.submitAttempted = true;
    }
  };
}

HTML

<div ng-app='app'>
  <div ng-controller='FormController as vm'>
    <form name='fooForm' ng-submit='vm.submit(fooForm.$valid)' novalidate>
      <label>Username</label>
      <input 
        name='username' 
        type='text' 
        ng-model='vm.user.username'
        required
        ng-minlength='4'
        ng-class="{'invalid': vm.submitAttempted && fooForm.username.$invalid}">
      <br /><br />
      <button type='submit'>Submit</button>
    </form>
  </div>
</div>

CSS

.invalid {
  border-color: red;
}

デモ

問題があります。ページが最初に読み込まれると、何かを入力し始める前であっても、すぐにユーザー名フィールドに赤い境界線が表示されます。

これはおそらく、次の CSS クラスがあるためです。

.ng-invalid {
  border-color: red;
}

Angular は常にng-invalid無効なフィールドにクラスを適用しますが、それに対してできることは何もありません。したがって、無効なフィールドに常に赤い境界線を付けたくない場合は、そのクラスを使用できず、上で提案したのと同様の方法で行う必要があります。

また、 ngMessagesもチェックしてください。

于 2015-08-05T14:30:27.980 に答える