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

Saya meletakkan kod anda pada jsFiddle dan membuat beberapa perubahan untuk memenuhi keperluan anda Jika anda tidak melihat kesannya, anda perlu pergi ke atas dinding. Demo adalah seperti berikut, anda boleh pratonton sendiri, dan ia juga membantu anda menambah butang hantar jika borang tidak lengkap.
Demo

Answer 2

Cukup letakkan ng-class dalam p dalam pakej luar, dan tambahkan gaya yang sepadan pada wanning dan error