I am facing an issue with the radio button for the account type. Even though it is correctly stored in the database, it does not display when I first load the page. However, upon clicking any of the radio buttons, it updates the value and shows as checked.
The account.accountType is defined as an enum with three options: internal = 0, customer = 1, or proposal = 2. It can also be null initially until a selection is made, in which case nothing will be checked. How can I resolve this issue?
My setup involves Angular version 1.4.9 and I am using TypeScript for the controller.
<div class="form-group"
ng-class="{ 'has-error': accountForm.$submitted && accountForm.accountType.$invalid }">
<label for="customerName">Account Type:</label>
<div>
<label class="radio-inline">
<input type="radio" name="accountType"
id="internal" value="0" ng-model="account.accountType"
ng-required="true" ng-checked="account.accountType == 0"> Internal
</label>
<label class="radio-inline">
<input type="radio" name="accountType"
id="customer" value="1" ng-model="account.accountType"
ng-required="true" ng-checked="account.accountType == 1"> Customer
</label>
<label class="radio-inline">
<input type="radio" name="accountType" id="proposal"
value="2" ng-model="account.accountType" ng-required="true"
ng-checked="account.accountType == 2"> Proposal
</label>
</div>
<p class="text-danger" ng-if="accountForm.$submitted && accountForm.accountType.$invalid">Please select an account type.</p>
</div>