angular.js - input輸入框，邊框隨錯誤變化？

Question

1、當在輸入框中輸入的內容不規範，提交form表單，input輸入框會提示錯誤，同時input的外層p邊框變成紅色，當我重新在輸入框輸入後，從第一個輸入的字元開始，外層的p邊框的顏色變成正常的顏色。

以下是程式碼

<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
    <p class="form_item  form_item_account">
        <label for=""> 用&nbsp;&nbsp;户&nbsp;&nbsp;名 </label>
        <input type="text" class="form_account" placeholder="您的账户名和登录名"
                id="form_item_account"
                ng-model="account"
                name="account"
                required
                ng-pattern="regularList.account"
                ng-class="{'warnning':checkForm.account.$focused,'error':(!isEmpty && checkForm.account.$blured &&
                 checkForm.account.$error.pattern) || (isEmpty && checkForm.account.$invalid)}"
                ng-blur="checkForm.account.$blured = true;checkForm.account.$focused = false;"
                ng-focus="checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()"
                autocomplete="off"
                >
        <i></i>
    </p>
    <p class="form_item">
        <button class="btn_register" id="btn_register" ng-click="isEmpty=true; confirm()">立即注册</button>
        <i></i>
    </p>
</form>

js中加入form_item_error類，輸入框外層p邊框變成紅色，去掉這個類，外層p邊框變成正常的

function checkError(form){
    var item = form.parent();
    if(form.hasClass("error")){
        item.addClass("form_item_error");
    }else if(item.hasClass("form_item_error")){
            item.removeClass("form_item_error");

    }else{
        item.removeClass("form_item_error");
    }
}
$scope.confirm = function () {
            $scope.accountValid = function(){
                checkError(form_account);
            }
 }

效果
錯誤時

在錯誤的情況下，輸入內容，邊框回復正常

求指點，謝謝

Answer 1

我把你的程式碼放到jsFiddle上了，改了下，可以達到了你的要求，如果看不到效果就要翻牆了。 demo如下，你自己預覽下，另外幫你加上了表單不完整不能點提交按鈕。
Demo

Answer 2

將ng-class放置外層包裹的p中即可，為wanning和error添加對應的樣式即可