Angular Material Flex-layout when using fxFlex with mat-form-field, the element does not appear in Internet explorer 11

Question

I am using Angular 6 with Material 6 & flex-layout 6-beta , I am currently facing a strange issue, the form fields that have fxFlex property don't appear at all in the IE although they appear & work fine in all other major browsers.

I have already configured the polyfills.ts so that the app work on Internet explorer but I don't have any clue how to fix this issue.

For example, consider the 2 form fields below, the one that doesn't have fxFlex will appear in IE but the other one is not shown

For the 2 paragraphs here, both are shown (even the one having fxFlex), it seems the issue is specifically between (fxFlex, mat-form-field & IE)

  <mat-form-field  fxFlex="25">
      <input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
        maxlength="2" required>
    </mat-form-field>

    <mat-form-field  >
        <input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
          maxlength="2" required>
      </mat-form-field>
      <p fxFlex="25" >hello , how are you?</p>
      <p>hello , how are you?</p>

My current polyfills.ts:

/***************************************************************************************************
     * BROWSER POLYFILLS
     */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

Any help is appreciated.

Answer 1

I have found that in order for IE11 to work correctly with the mat-form-field, you need to wrap the form field in a div tag. No need to add any attributes to this div tag.

In order to achieve this form layout in IE 11... IE 11 Form Layout...

Here is the code I used:

<div flLayout="column" fxLayoutGap="7px" fxLayoutGap.xs="0px">
  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="7px" fxLayoutGap.sm="0px">
    <mat-form-field fxFlex appearance="outline">
      <mat-label>First Name</mat-label>
      <input matInput formControlName="firstName">
    </mat-form-field>
    <mat-form-field fxFlex appearance="outline">
      <mat-label>Last Name</mat-label>
      <input matInput formControlName="lastName">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field fxFlex appearance="outline">
      <mat-label>Title</mat-label>
      <input matInput placeholder="Title" formControlName="title">
    </mat-form-field>
  </div>
</div>

Notice the div tag around the "Title" form field.

With this addition, IE 11 behaved nicely and had no affect on rendering by other browsers.