I am currently working with a form that appears in a modal directive using bootstrap UI. The form consists of 2 input fields with html5 validation set to "required."
Initially, in the controller, I tried to check if the form is valid before proceeding to submit it to the server. However, I encountered scope-related issues when attempting to reference $scope.FormName.$valid. Eventually, I found a workaround by passing the form name through ng-click.
Despite this solution, I noticed that the controller code always shows the form as valid, even when the required fields are empty. I am now looking for a way to implement a check to ensure the form is truly valid before submission.
Below is the code snippet:
HTML Form:
<form name="EmailForm">
<div class="row">
<div class="col-md-1 lbl_hdr">
date:
</div>
<div class="col-md-1">
{{Curr_Date | date:'dd/MM/yyyy'}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-1 lbl_hdr">
from:
</div>
<div class="col-md-1">
<input type="email" required placeholder="email" />
<br />
<br />
</div>
</div>
<div class="row">
<div class="col-md-3 lbl_hdr">
message:
</div>
</div>
<div class="row">
<div class="col-md-1">
<textarea class="msg_text" required rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-9">
<button type="submit" ng-click="SendEmail(EmailForm)" class="btn btn-primary btn_padded_top">send</button>
<button type="button" class="btn btn-primary btn_padded_top pull-left" ng-click="$close();">cancel</button>
</div>
</div>
</div>
</div>
</form>
Controller:
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/js/app/templates/msg_modal.html',
controller: function ($scope) {
$scope.Curr_Date = new Date();
$scope.SendEmail = function (EmailForm) {
if (EmailForm.$valid) {
EmailService.sendEmail("sdsd").success(
function (data) {
});
}//if valid
};
},
size: size
});
};
The issue of "if (EmailForm.$valid)" constantly evaluating to true persists.