I get the (dreaded)
An invalid form control with name='' is not focusable
error on one of my angular components. Before I get into details - I know that there are MANY questions that address this problem so these are the things I have tried that have not worked for me:
- Many responses address
hidden/requiredform controls (eg this). I have no form controls that I have designated as hidden or required - Some responses address issues with
<fieldset>andrequiredcontrols (eg this). I don't use field sets, and again, no required inputs - Many other responses (eg this) indicate that adding
novalidateto your<form>solves the issue. Tried, unsuccessful
The only form controls that I have in this component are the <form> itself with one <input> (or list/array of inputs). I am pretty much out of ideas for what else to try to get around the issue.
For reference:
<theme-panel-header>Add/Remove Charges</theme-panel-header>
<theme-panel-body>
<form name="form">
<div class="row">
<div class="col-md-6">
<div class="panel-default">
<div class="panel-body table-responsive min-height-5 max-height-5 margin-bottom-4">
<table class="table table-hover">
<thead>
<tr>
<th class="text-left">
Available Monthly Charges
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charge of availableMonthlyCharges; let i=index"
(click)="availableChargeSelected(i, charge)"
[ngClass]="{'selected-image': selectedCharge && charge.id === selectedCharge.id }">
<td>
{{charge.name}}
</td>
</tr>
<tr *ngFor="let charge of monthlyChargesToRemove; let i=index">
<td>{{charge.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-default">
<div class="panel-body table-responsive min-height-5 max-height-5 margin-bottom-4">
<table class="table table-hover">
<thead>
<tr>
<th class="text-left">
Assigned Monthly Charges
</th>
<th class="text-right">
Amount
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charge of assignedMonthlyCharges; let i = index"
(click)="assignedChargeSelected(i, charge)"
[ngClass]="{'selected-image': selectedAssignedCharge && charge.id === selectedAssignedCharge.id }">
<td>
{{charge.name}}
</td>
<td class="text-right">
{{charge.amount}}
</td>
</tr>
<tr *ngFor="let charge of monthlyChargesToAdd; let i=index"
(click)="chargeToAddSelected(i, charge)"
[ngClass]="{'selected-image': selectedChargeToAdd && charge.id === selectedChargeToAdd.id }">
<td>{{charge.name}}</td>
<td>
<input type="number"
class="form-control text-right"
name="monthlyChargesToAdd{{i}}"
[(ngModel)]="monthlyChargesToAdd[i].amount" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center col-md-offset-4">
<div>
<button type="button"
class="btn btn-sm btn-default pad-left-3 pad-right-3"
[disabled]="!(selectedAssignedCharge || selectedChargeToAdd)"
(click)="removeFromAssignedCharges()">
<i class="fa fa-arrow-left"></i> Remove
</button>
<button type="button"
class="btn btn-sm btn-default pad-left-6 pad-right-6"
(click)="addToAssignedCharges()"
[disabled]="!selectedCharge">
<i class="fa fa-arrow-right"></i> Add
</button>
</div>
</div>
</div>
<div class="row">
<div class="pull-right pad-right-1">
<button type="button" name="exitButton" class="btn btn-danger pad-left-3 pad-right-3" (click)="handleExit()">Exit</button>
<button type="button" name="submitButton" class="btn btn-success" (click)="submit()">Ok</button>
</div>
</div>
</form>
</theme-panel-body>
