setPristine清除表单不起作用

时间:2014-06-23 13:55:52

标签: angularjs

我试图在用户点击提交按钮时清除表单数据和表单状态。问题的关键是:

http://plnkr.co/edit/9JFafkjt4ceSoknlKZBF?p=preview

html是:

<div id="contactForm" class="container">
        <form class="horizontal" name="userForm" data-ng-submit="sendEmail(user)">
            <div class="col-md-12">
                <div class="pull-left">
                    <div class="form-group">
                        <label for="companyName">Frima</label>
                        <input type="text" id="companyName" class="form-control" title="Firma" name="companyName" pattern="[A-Za-z0-9ÀÁÄÈÉËÌÍÏÒÓÖÙÚÜßàáäèéëìíïòóöùúü]*+" data-ng-model="user.companyName">
                    </div>

                    <div class="form-group">
                        <label for="vorname">Vorname*</label>
                        <input type="text" data-ng-model="user.vorname" pattern="[A-Za-z0-9ÀÁÄÈÉËÌÍÏÒÓÖÙÚÜßàáäèéëìíïòóöùúü]+" id="vorname" class="form-control" title="Ihr Vorname" required>
                    </div>

                    <div class="form-group">
                        <label for="nachname">Nachname*</label>
                        <input type="text" data-ng-model="user.nachname" id="nachname" pattern="[A-Za-z0-9ÀÁÄÈÉËÌÍÏÒÓÖÙÚÜßàáäèéëìíïòóöùúü]+" title="Ihr Nachname" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="telefonnummer">Telefonnummer</label>
                        <input type="number" id="telefonnummer" data-ng-model="user.telefonnummer" max-length="14" min-length="11" width="100" class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="email">Email*</label>
                        <input type="email" id="email" data-ng-model="user.email" class="form-control" required novalidate>
                    </div>      
                </div>  

                <div class="pull-right">    
                    <div class="form-group text-area-group">
                        <label for="message">Nachtricht</label>
                        <textarea type="text" id="message" data-ng-model="user.message" rows="15" class="form-control" required></textarea>
                    </div>
                </div>      
            </div>

            <div class="form-group button-group text-center">
                <button type="submit" id="send" class="btn btn-default">Submit</button>
            </div>
        </form>
</div>

控制器是:

.controller('simpleApp', ['$scope', function ($scope){
    $scope.user = {};

$scope.sendEmail = function (user) {
    $scope.userForm.$setPristine(); //clear the state
    $scope.user = {}; //empty the form

    var telefon = 0;
    var message = 'no message';
    console.log(user);
    if(user.telefonnummer != 'undefined') {
        telefon = user.telefonnummer;
    }

    if(user.message != 'undefined') {
        message = user.message;
    }

    var emailArray = { 
        'subject': 'Contact Request',
        'CompanyName': user.companyName,
        'Vorname': user.vorname,
        'Nachname': user.nachname,
        'Telefonnummer': telefon,
        'Email': user.email,
        'Message': message,
    };
};

}]);

问题是:它适用于plunker,但不适用于我正在处理的应用程序。

有一些范围相关的问题,我忽略了这一点。控制台还为$ scope.userForm提供了错误,未定义$ scope.user不可用。

现在问题是$ setPristine()不起作用。因此,如果我显示一些错误并且用户对其进行了更正,它将继续发送先前的状态,这将导致相同的错误。

谢谢。

0 个答案:

没有答案