Having two forms in separate modals has led to an interesting observation. Upon opening the first modal, I successfully log the form attached to $scope. The controller initially assigns $scope.updateSecurityForm = {} with the name attribute as name="updateSecurityForm". All the expected properties like $valid are present.
However, encountering a peculiar situation when opening the second modal and logging the form from the first modal results in an empty object. Subsequently, closing the second modal and reopening the first modal leads to the same outcome of an empty object. This inconsistency was unexpected as the form properties should have been retained.
The configuration of the first modal form is as follows:
<div class="modal-body">
<form name="updateSecurityForm" ng-submit="updatePersonnels(upObj, updateSecurityForm)" ng-repeat="upObj in personnelProfileData" novalidate>
<div class="col-md-4">
<label for="vendor-name" class="control-label">Vendor Name:</label>
<select name="vendorname" ng-model="upObj.vendor_id" class=" text-center form-control" ng-options="data.vendor_id as data.vendor_name for data in getvendetailsdata">
{{data.vendor_name}}
</select>
</div>
</form>
</div>
As for the second modal:
<div class="modal-body">
<form name="addPlumberForm" ng-submit="addPersonnelsByRole(addObj,8, addPlumberForm)" novalidate>
<div class="col-md-4">
<div class="form-group">
<label for="message-text" class="control-label">
Name of the vendor:<span style="color: red;">*</span>
</label>
<select class="text-center form-control ng-valid ng-empty ng-dirty ng-touched" name="vendorname" ng-model="addObj.vendor_id">
<option value="" selected="selected">- Please select a vendor name -
</option>
<option ng-repeat="ae in getvendetailsdata" value="{{ae.vendor_id}}" class="ng-binding ng-scope">{{ae.vendor_name}}</option>
</select>
</div>
</form>
</div>
</div>
Both modals exist on the same page and share similarities, including the same name attributes in the forms for validation convenience.
In the controller, the initialization includes
$scope.updateSecurityForm = {} and $scope.addPlumberForm = {} for reference.
During validation, encountering
Cannot read property '$invalid' of undefined$scope.addPersonnelValidation = function(formName) {
console.log(formName, "formName");
if (formName.vendorname.$invalid) {
$.bootstrapGrowl('Please select vendor name', {
type: 'danger',
delay: 2000,
});
return;
}
Execution of the validation function is done through:
$scope.addPersonnelsByRole = function(addObj, user_role_type_id, formName) {
if ($scope.addPersonnelValidation(formName)) {
//valid form
}
}