validation - AngularJS での検証

Question

私はAngularJSが初めてです。私はいくつかの検証を実装しようとしています。テストとして、基本的なログイン画面を見ています。そのログイン画面のコードは次のようになります。

<style type="text/css">
  input.ng-invalid.ng-dirty { background-color: red; color:white; }
</style>

<form novalidate name="loginForm" role="form">
  <div ng-show="(isDataValid==false)" class="ng-hide">
    Please correct the errors on the page.
  </div>

  <div>
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Username" ng-model="username"
           required>
  </div>

  <div>
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Password" ng-model="password"
           required>
  </div>

  <button type="submit" ng-click="formSubmit(loginForm);">Submit</button>
</form>

<script type="text/javascript">
  function loginController($scope) {
    $scope.isDataValid = null;

    $scope.formSubmit = function(f) {
      $scope.isDataValid = f.$valid;
      if (f.$invalid) {
        return;
      }

      return false;
    };
  }
</script>

ページが読み込まれると、きれいな状態になりたいです (これは機能します)。ユーザーがフィールドでの作業を開始した後に、フィールド レベルの検証が必要です (これは機能します)。ユーザーが「送信」をクリックしたときに、フィールド レベルの検証が必要です。これは部分的に機能します。

私の問題は、フィールドをまったく使用せずに「送信」を押すと、フィールドの css クラスが更新されないことです。その理由は、フィールドが「汚れていない」からだと思います。ただし、これを修正する方法がわかりません。1) 最初の要件を満たし、2) AngularJS コントロールを DOM から遠ざけるという考えに固執します。

誰も私がこれを行う方法を知っていますか?

どうもありがとう！