I'm trying to clear my form every time I click publish:
$scope.product = {};
$scope.upload = function(user) {
var formData = new FormData;
$scope.product.owner = user;
for (key in $scope.product) {
formData.append(key, $scope.product[key]);
//console.log(key, ".........");
//console.log($scope.product[key]);
};
//getting the file
var file = $('#file')[0].files[0];
formData.append('image', file);
$http.post('http://localhost:3000/products', formData, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(function(res) {
$scope.item = res.data;
console.log($scope.item.image);
products.displayuserlist.push({
owner: $scope.product.owner,
car: $scope.product.newCar,
//seaters: 5,
price: $scope.product.newPrice,
//contact: 38880000,
area: $scope.product.businessArea,
image: $scope.item.image
});
$scope.product = null;
});
};All the input fill has been clear except for
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="product.newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="product.newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="product.businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file" id="file" ng-model="product.postimage" />
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>I have tried to use angular.element("input[type='file']").val(null); and $setPristine() but it does not work. How do I do this?
