I have a form created using AngularJS. The form is a questionnaire type form that can be submitted multiple times in a row. The form is a mix of text areas and drop-down select fields.
The form has quite a few number of questions and they need to be reset to default each time the form is submitted.
I manage to clear the text areas using $setPristine() but the drop-down fields dont rest to default values - they stay as previously selected when the form is submitted and you then revisit the form again. How do I reset all fields on the form - including the drop-down select? I dont want to reset each field individually because, as I mentioned, there can be a large number of questions per form and it would be inefficient to manually reset each question.
Below is a small sample of my form view
<div ng-controller="FormController" data-ng-init="init()">
<ons-page>
<!-- Form Start -->
<form class="questionnaire-form" name="myForm" novalidate>
<section class="form-section">
<ons-row>
<ons-col>
<p class="form-header">Header 1</p>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<p class="form-field-text">
<span style="color: #f76327">*</span> Outcome
</p>
</ons-col>
</ons-row>
<ons-row>
<ons-col width="90%">
<select id="outcome" name="outcome"
ng-model="severity.desc"
ng-options="severityOption.desc as severityOption.desc for severityOption in severity"
ng-change="changedValue(severity.desc, 'Severity')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<p class="form-field-text">
<span style="color: #f76327">*</span> PICW
</p>
</ons-col>
</ons-row>
<ons-row ng-hide="toggle">
<ons-col width="90%">
<textarea class="textarea"
rows="1"
placeholder="PICW"
ng-model="picw"></textarea>
</ons-col>
</ons-row>
</section>
<section var="saveBtn" ng-click="submitForm()">Submit</ons-button>
</section>
</form>
</ons-scroller>
</ons-page>
</div>
My controller handles the values being submitted by the user and works as intended. Then when the user submits the form I fire the submit() function that sends the data to the server and sets the for to pristine. However, the drop-down select values arent reset.
My views controller
var formController = angular.module("formController ", []);
formController .controller("FormController", function ($scope, FormField) {
var init = function () {
document.addEventListener("deviceready", onDeviceReady, false);
};
init();
function onDeviceReady() {
// Set severity drop down value
$scope.severity = FormField.getSeverity();
};
// Save details to database
$scope.submitForm= function () {
// Do form submit action here
// Set form pristine
$scope.myForm.$setPristine();
};
});
And I would create the values for the form drop-down select as follows.
var formFields = angular.module("formField", []);
formFields.service("FormField", function () {
// Severity
var Severity = [ {
desc: "Insignificant", id: "0"
}, {
desc: "Minor", id: "1"
},{
desc: "Moderate", id: "2"
}, {
desc: "Major", id: "3"
}, {
desc: "Catastrophic", id: "4"
}];
return {
// Get severity
getSeverity: function () {
return Severity;
},
};
});