Is there a way to apply ng-disable on a Bootstrap Modal Dialog when the form in a Partial View displayed in the Modal is Invalid?
Working with Asp.net MVC, I am facing an issue where I include a Partial View in a Modal form. The form should display details for editing or show a blank form for adding a new record upon clicking an item. Using Bootstrap Modal (data-target) works perfectly for opening the dialog. However, my ng-click function for saving changes prevents me from closing the dialog with data-dismiss as the button is in the partial view. If I move the save button to the parent, ng-disable stops working for form validation. Switching to Angular ui-Modal seemed like a solution, but it only works for displaying existing records and fails to open the modal for a new record. This problem has consumed hours of my time.
To sum up, I need help either with closing the Bootstrap Modal from my Angular Controller using ng-click or figuring out how to display the empty form using Angular ui-Modal.
Below is the code snippet for the modal in my cshtml View:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="addNewComment" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color:#003A5D; color:white">
<h4 class="modal-title">Comment View</h4>
</div>
<div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
<div class="modal-body">
@Html.Partial("_AddNewComment")
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
This is the rendered Partial View:
<div class="panel panel-primary">
<div class="panel-heading">Add New Comment</div>
<div class="panel-body" ng-repeat="cm in selection.comment">
<form name="CommentForm">
<table style="width:100%; border:none">
<!-- Form Fields -->
</table>
Long Comment (shown as Pop-up on the Contractor's homepage)<br />
<div style="font-size:8px">Max 2000 characters</div><br />
<textarea style="width:100%;height:200px" ng-model="cm.vchLongComment" required>
{{cm.vchLongComment}}
</textarea>
<br />
<!-- Buttons -->
</form>
</div>
</div>
Angular Controller Code:
$scope.clickTest = function (comment) {
debugger;
$scope.selection.comment.splice(comment);
};
$scope.ShowDetails = function (comment) {
debugger;
if (comment == undefined)
{
comment = [
{
id: 0,
vchShortComment: 'please add short comment',
vchLongComment: 'please add long comment'
}
]
}
$scope.selection.comment.push(comment);
//modalInstance = $modal.open({
// templateUrl: 'addNewComment',
// controller: ModalInstanceCtrl
// });
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};