Question

我得到了（可怕的）

name =''的无效表单控件无法调焦

我的一个角度组件出现

错误。在我详细介绍之前 - 我知道有很多问题可以解决这个问题所以这些是我尝试过的对我没用的东西：

许多回复都涉及hidden / required表单控件（例如this）。我没有指定为隐藏或必需的表单控件
有些回复解决了<fieldset>和required控件的问题（例如this）。我不使用字段集，而且没有使用必需的输入
许多其他回复（例如this）表示向novalidate添加<form>可以解决问题。试过，不成功

我在此组件中唯一的表单控件是<form>本身，其中包含一个<input>（或列表/输入数组）。我几乎没有想过要解决这个问题的其他方法。

供参考：

<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>&nbsp; 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>&nbsp; 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>

Angular2 - 名称为'''的无效表单控件不可聚焦

0 个答案: