angular – 如何在动态formArray下的formGroup中的控件上观察valueChanges

我是Angular 2/4的新手,也是Web开发的新手.我有这个表格,以采购形式收集产品变体的信息.
我已经构建了一个formArray of formGroups of variants,如下面的 HTML所示.

<form [formGroup]="this.purchaseInvoiceItemVariantsForm" novalidate>
    <div formArrayName="variants">
        <div *ngFor="let variant of this.purchaseInvoiceItemVariantsForm.controls.variants.controls; let i = index">
            <div [formGroupName]="i">
                <md-input-container>
                    <input mdInput placeholder="Product Code"  formControlName="productBarcode" class="input--small" [readonly]="this.mode == 'view'">
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="Color" formControlName="variant1" class="input--small" [readonly]="this.mode == 'view'" required>
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="Size" formControlName="variant2" class="input--small" [readonly]="this.mode == 'view'" required>
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="MRP" formControlName="mrp" class="input--small" [readonly]="this.mode == 'view'">
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="Purchase Price" formControlName="purchasePrice" class="input--small" [readonly]="this.mode == 'view'"
                        required>
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="Sell Price" formControlName="sellPrice" class="input--small" [readonly]="this.mode == 'view'"
                        required>
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="Quantity" formControlName="variantQuantity" class="input--small" [readonly]="this.mode == 'view'" required>
                </md-input-container>
                <md-input-container>
                    <input mdInput placeholder="discount" formControlName="variantdiscount" class="input--small" [readonly]="this.mode == 'view'">
                </md-input-container>
                <button md-icon-button (click)="removeVariant(i)" color="warn" *ngIf="purchaseInvoiceItemVariantsForm.controls.variants.length > 1 && this.mode != 'view'"><md-icon>delete</md-icon></button>
            </div>
        </div>

现在,一旦用户添加了3个变体,我希望能够监听formControl“productBarcode”的valueChanges,以便我可以从数据库中获取颜色和大小细节.

有什么建议可以实现吗？

提前致谢！

问候,
纳文

解决方法

我会去ngDoCheck().它不断地监听变化,然后你可以添加一些逻辑.对我帮助很大.

一个例子：

ngDoCheck() {
    if (this.arraOfItems.length > 3) {
        // Do stuff
    }
}

在你的课堂上你应该实现DoCheck,如下所示：

export class myClass implements OnInit,DoCheck {}

这样,如果您设法将项目添加到数组中,请说：arraOfItems.然后它会工作.

文档：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck

另一种方法：

在向arraOfItems添加项目的逻辑中,进行检查并添加逻辑,例如：

addingItemToArray(item) {
    this.arraOfItems.push(item);
    if (this.arraOfItems.length > 3) {
       // do stuff 
    }
}

此示例认为您创建了一个将项添加到数组的additionItemToArray方法.在它的逻辑中你可以放一个控制来检查数组的长度,如果你添加了超过3个项目,那么你可以做任何你想做的事情.