清除angularJs形式

我正在使用AngularJs 1.4並有一個輸入窗體。我在表單末尾有一個重置，取消和提交按鈕。當我點擊時，所有表單元素必須設置爲默認值。但是當我單擊reset按鈕時，submitForm函數也會與resetForm函數一起被調用。請讓我知道我出錯的地方。表單域也沒有被重置。清除angularJs形式

<form class="form-horizontal" name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate><!-- novalidate prevents HTML5 validation since we will be validating ourselves --> 
<div class="form-group" ng-class="{ 'has-error' : myForm.ipaddresses.$invalid && !myForm.ipaddresses.$pristine }"> 
    <label class="col-sm-3 control-label">IP</label> 
    <div class="col-md-6"><textarea name="ipaddresses" class="form-control" ng-model="ipaddresses" ng-minlength="8" ng-requied="!myForm.myFile"></textarea></div> 
    <p ng-show="myForm.ipaddresses.$invalid && !myForm.ipaddresses.$pristine" class="help-block">Hostname or IP Addresses are mandatory</p> 
    </div> 
    <div class="hr-line-dashed"></div> 
    <div class="form-group"> 
    <label class="col-sm-3 control-label">File Upload</label> 
    <div class="col-lg-6"> 
     <div class="upload-file"> 
     <input type="file" file-model="myFile" class="upload-demo" id="upload-demo" ng-requied="!myForm.ipaddresses"> 
     <label for="upload-demo" data-title="Select file"> 
      <span class="ng-binding">Comma separated CSV file...</span> 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="hr-line-dashed"></div> 
    <div class="form-group"><label class="col-sm-3 control-label">Mode</label> 
    <div class="col-md-3"> 
     <select name="mode" class="form-control m-b" ng-required="true"> 
     <option>Enable</option> 
     <option>Disable</option> 
     </select> 
    </div> 
    </div> 
    <div class="hr-line-dashed"></div> 
    <div class="form-group" style="margin-top: 8%;"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <button class="btn btn-info">Cancel</button> 
     <button class="btn btn-warning" ng-click="resetForm(myForm)">Reset</button> 
     <button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid">Next >></button> 
    </div> 
    </div> 
</form>

在我的控制器我有下面的代碼：

$scope.submitForm = function(isValid) { 
    // check to make sure the form is completely valid 
    if (isValid) { 
     alert('our form is amazing'); 
    } 
}; 

$scope.resetForm=function(myForm){ 
     console.log('came here....') 
     myForm.ipaddresses=null; 
    }

來源

2016-02-18 zilcuanu

只要改變myForm.ipaddresses=null;到$scope.ipaddresses='';。

它應該如下：

$scope.resetForm=function(myForm){ 
    console.log('came here....'); 
    $scope.ipaddresses=''; 
}

來源

2016-02-18 10:08:13 Gracia

我這樣做，但沒有工作。 – zilcuanu

請訪問這個小提琴：https：//jsfiddle.net/n9tL7cdr/8/。當單擊'$ scope.resetForm'時，IP textArea正在重置。你想重置文件上傳到列表框嗎？ – Gracia

當我們在控制器上調用'reset'功能時，爲什麼會打印出'令人驚歎的樣式'？ – zilcuanu

你可以使用$ setPristine（）;到形式，如角 https://docs.angularjs.org/api/ng/type/form.FormController的醫生說

「設置的形式返回到原始狀態，是非常有用，當我們想爲‘重複使用’保存或重置之後的一種形式。」

想到幫你

來源

2016-02-18 10:12:21

清除angularJs形式

回答

相關問題