使用 angularjs 清除表单

Question

问题：我无法完全清除表单的字段。

让我更具体一点。当我转到控制台时，即使选择了重置按钮，之前的条目似乎仍然存在。

我在表格中做了以下事情。我有一个提交按钮和一个重置按钮。

    <div class="panel panel-default">
<div class="panel-body">
    <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate role="form">
        <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>

        <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>

        <!---<div class="form-group">
            <select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
                <option disabled="disabled" selected="selected" value="">Specialty</option>--->
                <!---<option disabled="disabledvalue=""></option>---><!---<option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option>
            </select>--->
            <div class="form-group">
            <select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
                <option selected="selected" value="">Specialty</option>
                     <!---<option value=""></option>--->
                      <cfoutput query="SpFind">
                       <option value=#ProviderSpecialty#>#ProviderSpecialty#</option>
                    </cfoutput> 
                  </select>

        </div>

        <div class="form-group">
            <select class="form-control" id="city" ng-model="searchParam.City">
                <option selected="selected" value="">City</option>
                     <!---<option value=""></option>--->
                      <cfoutput query="cityFind">
                       <option value=#city#>#city#</option>

                       <!---<option ng-selected="{{searchParam.City==#city#?true:false}} value=#city#>#city#</option>--->
                    </cfoutput> 
            </select>

        <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities" value="{{c.City}}">{{c.City}}</option> </select>--->
        </div>
        <div class="row">
            <!---<div class="col-xs-6 no-right-padding paddingLanguage">
                <div class="form-group widthLanguage">


                <select id="language" name="language" class="form-control" ng-model="searchParam.Language">
                    <option disabled="disabled" selected="selected" value="">Language</option>
                    <!---<option value=""></option>--->
                 <cfoutput query="Languages">
                      <option value=#Language#>#Language#</option>
                    </cfoutput> 
                  </select>



                  <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
                    <option disabled="disabled" selected="selected" value="">Language</option>
                    <option ng-repeat="l in Languages">{{l.Lang}}</option>
                  </select>--->
                </div>
            </div>--->

            <div class="col-xs-6 no-left-padding">
                <div class="form-group"><select class="form-control" id="gender" name="gender" ng-model="searchParam.Gender">
                <option selected="selected" value="">Gender</option>
                <!---<option value=""></option>--->
                <option>Male</option><option>Female</option> </select></div>
            </div>
        </div>

        <hr class="hrDoctor" />
        <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

        <div class="row">
            <div class="col-xs-7 no-right-padding">
                <div class="form-group">
                    <div class="input-group">
                        <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
                        <!---<option selected="selected" value="" disabled="disabled">Miles</option>--->
                            <option selected="disabled" value=""></option>
                            <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
                            <!---<option selected="disabled" value=""></option>
                            <option selected="selected" value="5">5</option>
                            <option selected="selected" value="10">10</option>
                            <option selected="selected" value="15">15</option>
                            <option selected="selected" value="20">20</option>---> 
                        </select>
                        <div class="input-group-addon">mi</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-5 no-left-padding widthZip">
              <div class="form-group">
                <input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
              </div>
            </div>
        </div>

        <div class="form-group">
            <input class="btn btn-warning btn-block" onclick="return checkTextField(); overlayDisplayButton();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
            <div style="margin-top:10pt"><button type="reset" class="btn btn-info btn-block" ng-click="reset()">Reset</button></div>
        </div>
    </form>
</div>

下面是重置表单的脚本：

    $scope.reset = function(form) {
    form.$setPristine();
    form.$setUntouched();
};

我缺少什么来完全重置表单？

Answer 1

这应该是你的重置函数：

$scope.reset = function() {
    $scope.searchParam = {};
    $scope.providerSearch.$setPristine();
    $scope.providerSearch.$setUntouched();
};

其中providerSearch 是表单名称。