Angular Material Flex-layout при использовании fxFlex с mat-form-field, элемент не отображается в Internet Explorer 11 - PullRequest
Новая
       27

Angular Material Flex-layout при использовании fxFlex с mat-form-field, элемент не отображается в Internet Explorer 11

0 голосов
/ 29 мая 2018

Я использую Angular 6 с Material 6 и flex-layout 6-beta, в настоящее время я сталкиваюсь со странной проблемой: поля формы со свойством fxFlex вообще не отображаются в IE, хотя они появляются и работают нормально ввсе остальные основные браузеры.

Я уже настроил polyfills.ts так, чтобы приложение работало в Internet Explorer, но я понятия не имею, как решить эту проблему.

Например,рассмотрим 2 поля формы ниже, то, которое не имеет fxFlex, появится в IE, но другое не отображается

Для 2-х абзацев здесь показаны оба (даже то, что имеет fxFlex), оноКажется, проблема именно между (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>

Мои текущие 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
 */

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 22 августа 2018

Я обнаружил, что для корректной работы IE11 с полем mat-form вам необходимо обернуть поле формы в тег div.Нет необходимости добавлять какие-либо атрибуты к этому тегу div.

Для того, чтобы добиться этого макета формы в IE 11 ... Макет формы IE 11 ...

Здесьэто код, который я использовал: 

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

Обратите внимание на тег div вокруг поля формы «Заголовок».

С этим добавлением IE 11 работал хорошо и не влиял на рендеринг другими браузерами..

...