How to observe valueChanges on a control inside a formGroup under a dynamic formArray

Question

I am new to Angular 2/4, as well as web development in general. I have this form that collects information about product options on the purchase form. I built a formArray of formGroups options as shown below in 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>

Now, as soon as the user adds, they say 3 options, I want to be able to listen to the valueChanges formControl "productBarcode" so that I can get color and size information from the database.

Any suggestions on how this can be achieved?

early!

Regards, Navin

Answer 1

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 
    }
}

, addingItemToArray, . , , , , .

Answer 2

valueChanges, , variants -array >= 3. -.

, , variants, :

addVariant() {
  // code here for adding control

  // check length   
  if(this.purchaseInvoiceItemVariantsForm.get('variants').length >= 3) {
    // iterate each object in array
    for(let val of this.purchaseInvoiceItemVariantsForm.get('variants').controls) {
      // listen to changes in each barcode, if change, do something!
      val.get('productBarcode').valueChanges.subscribe(data => {
      console.log(val.get('productBarcode').value)
      // do something!
      })
    }
  } 
}