Question

我已经映射了formcontrolname，但是仍然无法检测到它？似乎是什么问题？

这是我的html表单代码

menuItem.addActionsListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent e) {
        this.clickHandler(e);
    }
});
menuItem.removeActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent e) {
        this.clickHandler(e);
    }
});

这是我的组件代码。

<form [formGroup]="purchaseOrderForm">
    <div class="row">
        <!-- vendor -->
        <div class="col-md-6" *ngIf="showVendor">
            <div class="form-group">
                <!-- <input type="text" formControlName="inputVendor" class="form-control" placeholder="Vendor"> -->
                <ng-select [items]="vendorListHolder" formControlName="inputVendor" class="custom"></ng-select>
            </div>
        </div>
        <!-- Order Number -->
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" formControlName="inputOrderNumber" class="form-control"
                        placeholder="Order Number">
                </div>
            </div>
            <!-- Address -->
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" formControlName="inputAddress" class="form-control" placeholder="Address">
                    </div>
                </div>
                <!-- Payment Status -->
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" formControlName="inputPaymentStatus" class="form-control"
                        placeholder="Payment Status">
                        </div>
                    </div>
                    <!-- Total Paid -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="number" formControlName="inputTotalPaid" class="form-control"
                        placeholder="Total Paid">
                            </div>
                        </div>
                        <!--  Total Amount -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="number" formControlName="inputTotalAmount" class="form-control"
                        placeholder="Total Amount">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div (click)="addItemFields()">asdasdasd</div>
                                <!-- start of table -->
                                <div class="table-responsive">
                                    <table class="table align-items-center table-flush">
                                        <thead class="thead-light">
                                            <tr scope="row">
                                                <th scope="col">Item Name</th>
                                                <th scope="col">Quantity</th>
                                                <th scope="col">Price &nbsp; &nbsp; &nbsp; &nbsp; </th>
                                                <th scope="col">Sub Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr scope="row" formArrayName="itemForm" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
                                                <th scope="col">
                                                    <div class="media align-items-center">
                                                        <!-- item-->
                                                        <div *ngIf="showItems">
                                                            <div class="form-group">
                                                                <ng-select (change)="onSelectedItem()" [items]="itemListHolder" class="custom" formControlName="itemSelected"></ng-select>
                                                                <!-- [(ngModel)]="itemSelected" -->
                                                                <!-- [ngModelOptions]="{standalone: true}" -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th scope="col">
                                                    <div class="form-group">
                                                        <input type="number" formControlName="inputQuantity" class="form-control" placeholder="Quantity">
                                                        </div>
                                                    </th>
                                                    <th scope="col">
                                                        <div class="form-group">
                                                            <input type="number" formControlName="inputPrice" class="form-control" placeholder="Price asdasdasd">
                                                            </div>
                                                        </th>
                                                        <th scope="col">
                                                            <div class="form-group">
                                                                <input type="number" formControlName="inputSubTotal" class="form-control" placeholder="Sub Total">
                                                                </div>
                                                            </th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- end of table -->
                                        </div>
                                        <button class="btn btn-icon btn-3 btn-success" type="button" (click)="test()">
                                            <span class="btn-inner--icon">
                                                <i class="ni ni-fat-add"></i>
                                            </span>
                                            <span class="btn-inner--text">Save</span>
                                        </button>
                                        <button class="btn btn-icon btn-3 btn-danger" type="button" (click)="addPurchase()">
                                            <span class="btn-inner--icon">
                                                <i class="ni ni-fat-add"></i>
                                            </span>
                                            <span class="btn-inner--text">Cancel</span>
                                        </button>
                                    </div>
                                </form>

test（）方法仅适用于控制台。我只是想在控制台中看到值

我将输入字段放在表中，所以我希望这没关系

请帮助:(现在试图弄清楚几个小时。

顺便说一句，即使出现错误，我也可以动态添加字段

Answer 1

我假设您正在谈论下面的代码行

<tbody>
------><tr scope="row" formArrayName="itemForm" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
       .....your other code
    </tr>
</tbody>

这是Angular Forms Array文档

https://angular.io/api/forms/FormArrayName#description

根据文档，* ngFor循环应为具有formArrayName属性的元素的子级。因此，尝试将formArrayName =“ itemForm”放在tbody元素中。

所以看起来像这样

<tbody formArrayName="itemForm">
    <tr scope="row" *ngFor="let group of itemsArray.controls; let i = index;" [formGroupName]="i">
       .....your other code
    </tr>
</tbody>

角形数组找不到带路径的控件

1 个答案: