angularjs – 无法清除形式

2023年12月29日 218次阅读

我想在单击提交按钮后重置表单.我知道单独将表单设置为pristine不应该清除输入字段.我尝试通过将表单设置为pristine然后将null分配给所有输入字段来实现清除表单的各种建议.有更简洁的方法来实现它吗？

模板：

 <p>{{contactForm.$pristine}}</p>
    <div class="inBox">
        <form  name="contactForm" novalidate>

            <div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
                <label>Name</label>
                <input type="text" ng-model="tabVm.name" class="form-control" name="name" required>
                <p ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p>
            </div>


            <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
                <label>Email</label>
                <input type="email" ng-model="tabVm.email" name="email" class="form-control" required>
                <p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Enter a valid email.</p>
            </div>

            <div class="form-group">
                <label>Contact Number</label>
                <input type="tel" ng-model="tabVm.number" class="form-control">
            </div>

            <div class="form-group" ng-class="{ 'has-error' : contactForm.message.$invalid && !contactForm.message.$pristine }">
                <label>Message</label>
                <textarea type="text" rows="5" ng-model="tabVm.message" name="message" class="form-control textBox" required></textarea>
                <p ng-show="contactForm.message.$invalid && !contactForm.message.$pristine" class="help-block">Brief message is required.</p>
            </div>


        </form>
        <button type="submit" ng-click="sendMsg()" class="btn large-btn"
                ng-disabled="contactForm.message.$invalid || contactForm.name.$invalid||contactForm.email.$invalid " >Send</button>

    </div>

app.js

$scope.contactForm.$setPristine();

而且我也试过了

 $scope.contactForm.$pristine=true;

它们似乎都不起作用.我使用角1.4.8.

谢谢.

最佳答案 您应该使用$setPristine()然后重置ng-model对象.另外注意你在< form>之外有提交按钮.

这是一个工作JSFiddle(我只使用了一个输入)

  $scope.sendMsg = function() {
      $scope.contactForm.$setPristine();
      $scope.tabVm = {};
  }

你引用了controlForm,但你发布的html有contactForm

点赞