In my AngularJS form, the default data pulled from scope should enable validation and allow submission. However, I am encountering an issue where the button remains disabled until data is entered in the input field. Here is the code snippet:
<div ng-controller="FormValidationController as frmValidationController" class="ui basic segment">
<form class="ui form" name="frmValidation" novalidate>
<div ng-class = "{'has-error':frmValidation.option1.$invalid && !frmValidation.option1.$pristine}"
class="required field">
<label>Selection</label>
<input ng-model="option" ng-minlength="3" formcontrol
name="option1" placeholder="Option" type="text"
class="ng-dirty ng-valid ng-touched" required>
<div _ngcontent-c5="" ngxerrors="option1">
<div class="input-error-message" ngxerror="validName" hidden="">
selection should be there
</div>
</div>
<p ng-show = "frmValidation.option1.$invalid && !frmValidation.option1.$pristine"
class = "input-error-message">required</p>
</div>
By design, the button should be enabled upon launch if the model has data. Unfortunately, this functionality is not working as intended and needs to be addressed.
<button ng-click="submit(); frmValidationController.submitForm(frmValidation.$valid)"
ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
class="ui primary button" tabindex="0" type="submit">
Proceed
</button>