sometime form .get return null

🐞 bug report

sometime form .get return null. i have no idea why? for example in my code i just add withholdingTax.items in to form and i try to subscribe valueChanges but it said i try to access valueChanges of null value

After i try to find a re-produce step to fix it i found that sometime form.get will return null. as you can see in next screenshot line 195 and 199 is same code (console.log(this.form.get('withholdingTax.items')); and not touch any controls in the form but result is different

list of error that i found

• Cannot read property 'controls' of null
• Cannot read property 'valueChanges' of null
• Cannot read property 'setValue' of null
• Cannot read property 'value' of null
• Cannot find control with name
• Cannot read property 'length' of null (FormArray)

Affected Package

i think it should be @angular/forms

Description

A clear and concise description of the problem...

TypeError: Cannot read property 'valueChanges' of null
    at FormPaymentVoucherComponent.push../src/app/purchase/payment-voucher/form-payment-voucher/form-payment-voucher.component.ts.FormPaymentVoucherComponent.initForm (form-payment-voucher.component.ts:193)
    at FormPaymentVoucherComponent.push../src/app/component/base-form/base-form.component.ts.BaseFormComponent.ngOnInit (base-form.component.ts:36)
    at FormPaymentVoucherComponent.push../src/app/purchase/shared/base-purchase-form/base-purchase-form.component.ts.BasePurchaseFormComponent.ngOnInit (base-purchase-form.component.ts:49)
    at FormPaymentVoucherComponent.push../src/app/purchase/payment-voucher/form-payment-voucher/form-payment-voucher.component.ts.FormPaymentVoucherComponent.ngOnInit (form-payment-voucher.component.ts:99)
    at checkAndUpdateDirectiveInline (core.js:21096)
    at checkAndUpdateNodeInline (core.js:29494)
    at checkAndUpdateNode (core.js:29456)
    at debugCheckAndUpdateNode (core.js:30090)
    at debugCheckDirectivesFn (core.js:30050)
    at Object.eval [as updateDirectives] (FormPurchaseComponent.html:256)


  | push../src/app/shared/error-handler.ts.RavenErrorHandler.handleError | @ | error-handler.ts:110
-- | -- | -- | --
  | (anonymous) | @ | core.js:27136
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:391
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:150
  | push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular | @ | core.js:26214
  | push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick | @ | core.js:27136
  | (anonymous) | @ | core.js:26997
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:391
  | onInvoke | @ | core.js:26255
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:390
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:150
  | push../node_modules/@angular/core/fesm5/core.js.NgZone.run | @ | core.js:26169
  | next | @ | core.js:26997
  | schedulerFn | @ | core.js:23734
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub | @ | Subscriber.js:192
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next | @ | Subscriber.js:130
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next | @ | Subscriber.js:76
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next | @ | Subscriber.js:53
  | push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next | @ | Subject.js:47
  | push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit | @ | core.js:23718
  | checkStable | @ | core.js:26224
  | onHasTask | @ | core.js:26268
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask | @ | zone.js:443
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount | @ | zone.js:463
  | push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount | @ | zone.js:291
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:212
  | drainMicroTaskQueue | @ | zone.js:601
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:502
  | invokeTask | @ | zone.js:1693
  | globalZoneAwareCallback | @ | zone.js:1719

🌍 Your Environment

Node: 10.19.0
OS: linux x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.3
@angular-devkit/build-optimizer   0.803.3
@angular-devkit/build-webpack     0.803.3
@angular-devkit/core              8.3.3
@angular-devkit/schematics        8.3.3
@angular/cdk                      7.3.0
@angular/cli                      8.3.3
@ngtools/webpack                  8.3.3
@schematics/angular               8.3.3
@schematics/update                0.803.3
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant? i think this is browser specific issue. my issue tracker said this issue appear on

• Chrome Version 80.0.3987.87 (Official Build) (64-bit) on Linux Mint 19 Cinnamon
• Chrome 80.0.3987 on Windows 7,8,10
• Chrome 81.0.4044 on Windows 7,10
• Chrome Mobile [phone] on Android 10

i am not sure is this same issue with #35214 or not

[mix5003]

@shravan20084312 it quick dirty fix so i just add this to main.ts

(function () {
  function getChromeVersion() {
    const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

    return raw ? parseInt(raw[2], 10) : false;
  }

  const chromeVersion = getChromeVersion();
  if (chromeVersion && chromeVersion >= 80) {
    Array.prototype.reduce = function (callback /*, initialValue*/) {
      'use strict';
      if (this == null) {
        throw new TypeError('Array.prototype.reduce called on null or undefined');
      }
      if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
      }
      let t = Object(this), len = t.length >>> 0, k = 0, value;
      if (arguments.length === 2) {
        value = arguments[1];
      } else {
        while (k < len && !(k in t)) {
          k++;
        }
        if (k >= len) {
          throw new TypeError('Reduce of empty array with no initial value');
        }
        value = t[k++];
      }
      for (; k < len; k++) {
        if (k in t) {
          value = callback(value, t[k], k, t);
        }
      }
      return value;
    };
  }
})();

i grab this code from https://gist.github.com/lski/0eae0d2738831b6b0ec2b88a8a603952

[swftvsn]

This is really serious bug and should be dealt with immediately.