Запрет 3 пробелов подряд

#javascript #регулярные_выражения #angular4

Плохо знаю регулярные выражения. 
У меня есть форма в Angular 5, для полей есть различные способы валидации, один из
них Validators.pattern который добавляет шаблон в виде регулярного выражения, в данном
случае мне нужен шаблон для ввода любого количества слов, но количество пробелов не
больше 3
Заранее спасибо!
    

Ответы

Ответ 1

Не более трёх пробелов на весь текст:

^(\S*\s){0,3}\S*$


Проверка:



input { box-sizing: border-box; width: 100%; border: 1px solid; outline: none; }
:valid { border-color: green; }
:invalid { border-color: red; }





Не более трёх пробелов подряд:

^((?!\s{4}).)*$


Проверка:



input { box-sizing: border-box; width: 100%; border: 1px solid; outline: none; }
:valid { border-color: green; }
:invalid { border-color: red; }

Возможно ли одним fxFlex-ом добиться нужного вида?

#angular2 #flexbox #angular #angular4 #angular5

Необходимо получить такой результат:


Но проблема вот в чем:

Если в блоке fxLayout="row wrap" fxLayoutGap="25px"
для элемента задать fxFlex="20", в строке вмещается 3 элемента, а не 4 из-за отступов
fxLayoutGap в 25px

В инспекторе смотрю для элемента задано max-width: 20%

Думал решить проблему таким образом, fxFlex="calc(20% - 25px)", но в таком случае
в инспекторе уже не максимальная ширина, а min-width: calc(20% - 25px); и вот что получается:


fxLayoutGap="25px grid" также не решает даной задачи, добавляет лишний горизонтальный
скролинг :(

Как можно решить данную задачу ?

Код тут: https://stackblitz.com/edit/angular-j3pgzp
    

Ответы

Ответ 1

Можно добиться, но для этого вам нужно использовать биндинги с медиа запросами:

fxFlex.gt-md="calc(20% - 25px)"


Где gt-md это screen and (min-width: 1280px), а на меньшую ширину использовать другой
медиа запрос, например:

fxFlex.lt-lg="calc(33% - 25px)"


Где lt-lg это screen and (max-width: 1279px).

Но еще проблема в том, что вы оперируете процентами и 2 блока имеющих ширину 33%
растянуться, это проблема самого пакета flex-layout, потому что биндинг fxFlex компилируется
в flex + min-width.

Единственный workaround, который предлагает Каэрус Кару (лид flex-layout) - это вручную
задавать max-width.

Один из вариантов это вручную следить за изменениями медиа запросов, это за вас может
сделать MediaObserver из ядра flex-layout:

import { MediaObserver, MediaChange } from '@angular/flex-layout';

import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

@Component({ ... })
export class SomeComponent implements OnDestroy {
  public fxFlex: string = null;

  private readonly destroy$ = new Subject();

  constructor(mediaObserver: MediaObserver) {
    mediaObserver.asObservable().pipe(
      map((changes: MediaChange[]) => {
        return changes.map(({ mediaQuery }) => mediaQuery);
      }),
      map((queries: string[]) => {
        const matches = queries.find((query) => query === 'screen and (min-width:
1280px)');
        return !!matches;
      }),
      takeUntil(this.destroy$)
    ).subscribe((matches) => {
      if (matches) {
        this.fxFlex = 'calc(25% - 25px)';
      } else {
        this.fxFlex = 'calc(33% - 25px)';
      }
    });
  }

  public ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}


Дабы поиграться и понять, что представляет из себя поток mediaObserver - вы можете
просто добавить console.log(changes).

Тогда в самом шаблоне вы можете уже биндить саму переменную:

[fxFlex]="fxFlex" [style.max-width]="fxFlex"


Добавлю от себя - не полагайтесь полностью на этот пакет. Проще писать стили , используя
обычный CSS. Этот пакет - убийца производительности.

Конфликт bootstrap 4 и angular 4 - некорректно вычисляется высота блоков

#css #bootstrap #angular2 #angular4

Как сделать страницу аналогично https://startbootstrap.com/template-overviews/3-col-portfolio/
с boostrap 4 и angular 4?

Изначально использовались boostrap 3 и angular 4, 
пытался сделать страницу по примеру, в котором используется bootstrap 4 https://startbootstrap.com/template-overviews/3-col-portfolio/
https://blackrockdigital.github.io/startbootstrap-3-col-portfolio/

вот мои попытки с моей версией boostrap 3
http://jsfiddle.net/96thessa/4/
здесь вроде бы все работает аналогично, но если добавляется angular, место под изображение
растягивается на высоту всего блока, а текст съезжает.
при использовании angular происходит следующее https://imgur.com/9IZ1Jvx размеры
пустой картинки: https://imgur.com/z3sqNoe
вначале блоки отображаются аналогично http://jsfiddle.net/96thessa/4/ 
но через мгновение пустая картинка занимает всю высоту блока и выталкивает текст
ниже границы блока.
С bootstrap 4 ситуация аналогичная.

Страница - компонент angular, соответственно, boostrap скрипт и стили подгружаются
в индексе, а стиль самого компонента содержит правила для классов card, card-img-top
и т.д. На jsfiddle.net не знаю, как эти все нюансы воспроизвести с учетом angular.
Возможно, angular вносит смуту? Влияет ли порядок загрузки стилей на расчет размера
картинки? Или boostrap не стоит подключать через link и script в html файле, а лучше
каким-то другим способом? Влияет ли angular на отображение изображений таким образом?
В стилях в инспекторе браузера не увидел ничего дополнительного, что бы могло исказить
отображение. Пробовал использовать изображение, не обрамленное ссылкой a, результат тот же.

Update: архив тестовые исходники 

Update: пока костыльное решение - не показывать несуществующие изображения (display:
none), но блоки все равно почему-то растягиваются больше, чем нужно, в высоту. Пытался
заменить margin-ы на padding-и, эффект не особо изменился, автоматический расчет высоты
блока происходит неверно, я полагаю, проблема не в изображениях, а в самих блоках.

Update: пытаюсь устранить конфликт angular и bootstrap, используя ng-bootstrap. Выполнил
установку npm install --save @ng-bootstrap/ng-bootstrap, убрал подключение bootstrap.min.js
и jquery.min.js, оставив только подключение bootstrap.min.js (4.0.0-beta.2). В app.module.ts
внес изменения:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';    
...

@NgModule({
  ...
  imports: [
    ...
    NgbModule.forRoot(),
    ...
  ],
  providers: [
   ...
  ],
  bootstrap: [AppComponent]
})
...


Высота блоков по-прежнему рассчитывается некорректно.

Ссылка на страницу 

Update:
добавил стили 

.h-100[_ngcontent-c3] { height: auto !important; }
.h-100 { height: auto!important; }
.h-100[_ngcontent-c4] { height: auto !important; }
.container[_ngcontent-c3] .card[_ngcontent-c3] { height: auto !important; }


и убрал 

.h-100 { height: 100%!important; }


результат:
https://i.imgur.com/ULzNpFK.png
Внешние дивы для блоков имеют корректную высоту, но .card сжимается по контенту по
высоте, и соседние колонки не выравниваются в итоге по высоте, хотя стиль height: auto
!important; применяется. Проверял в chrome, firefox. Искомая страница, с которой сделан
скриншот Ссылка на страницу 
    

Ответы

Ответ 1

Вы не указали стили к классу .row 

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}



  Результат:




Обновление 0.0.1: 

На предоставленном ресурсе возможно поправить верстку внеся вот такие изменения:  


  Удалите css код:


.h-100[_ngcontent-c3] {
     height: 100% !important; 
}
.h-100 {
     height: 100%!important; 
}   


Если нет возможности удалить, замените на height: auto important;  

После для выравнивания вы можете написать: 

.portfolio-item[_ngcontent-c3] {
    margin-bottom: 30px;
    display: flex;
}   


И если размер картинок будет всегда один сделать вот так: 

.card.h-100 img {
    max-height: 200px;
}



  В итоге вы получите вот такой результат:


Вариант №1 
С картинкой но битой ссылкой

Вариант №2 
Полностью без картинки(без тега < img >)

Конфликт bootstrap 4 и angular 4 - некорректно вычисляется высота блоков

Как сделать страницу аналогично https://startbootstrap.com/template-overviews/3-col-portfolio/ с boostrap 4 и angular 4?
Изначально использовались boostrap 3 и angular 4, пытался сделать страницу по примеру, в котором используется bootstrap 4 https://startbootstrap.com/template-overviews/3-col-portfolio/ https://blackrockdigital.github.io/startbootstrap-3-col-portfolio/
вот мои попытки с моей версией boostrap 3 http://jsfiddle.net/96thessa/4/ здесь вроде бы все работает аналогично, но если добавляется angular, место под изображение растягивается на высоту всего блока, а текст съезжает. при использовании angular происходит следующее https://imgur.com/9IZ1Jvx размеры пустой картинки: https://imgur.com/z3sqNoe вначале блоки отображаются аналогично http://jsfiddle.net/96thessa/4/ но через мгновение пустая картинка занимает всю высоту блока и выталкивает текст ниже границы блока. С bootstrap 4 ситуация аналогичная.
Страница - компонент angular, соответственно, boostrap скрипт и стили подгружаются в индексе, а стиль самого компонента содержит правила для классов card, card-img-top и т.д. На jsfiddle.net не знаю, как эти все нюансы воспроизвести с учетом angular. Возможно, angular вносит смуту? Влияет ли порядок загрузки стилей на расчет размера картинки? Или boostrap не стоит подключать через link и script в html файле, а лучше каким-то другим способом? Влияет ли angular на отображение изображений таким образом? В стилях в инспекторе браузера не увидел ничего дополнительного, что бы могло исказить отображение. Пробовал использовать изображение, не обрамленное ссылкой a, результат тот же.
Update: архив тестовые исходники
Update: пока костыльное решение - не показывать несуществующие изображения (display: none), но блоки все равно почему-то растягиваются больше, чем нужно, в высоту. Пытался заменить margin-ы на padding-и, эффект не особо изменился, автоматический расчет высоты блока происходит неверно, я полагаю, проблема не в изображениях, а в самих блоках.
Update: пытаюсь устранить конфликт angular и bootstrap, используя ng-bootstrap. Выполнил установку npm install --save @ng-bootstrap/ng-bootstrap, убрал подключение bootstrap.min.js и jquery.min.js, оставив только подключение bootstrap.min.js (4.0.0-beta.2). В app.module.ts внес изменения:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; ...
@NgModule({ ... imports: [ ... NgbModule.forRoot(), ... ], providers: [ ... ], bootstrap: [AppComponent] }) ...
Высота блоков по-прежнему рассчитывается некорректно.
Ссылка на страницу
Update: добавил стили
.h-100[_ngcontent-c3] { height: auto !important; } .h-100 { height: auto!important; } .h-100[_ngcontent-c4] { height: auto !important; } .container[_ngcontent-c3] .card[_ngcontent-c3] { height: auto !important; }
и убрал
.h-100 { height: 100%!important; }
результат: https://i.imgur.com/ULzNpFK.png Внешние дивы для блоков имеют корректную высоту, но .card сжимается по контенту по высоте, и соседние колонки не выравниваются в итоге по высоте, хотя стиль height: auto !important; применяется. Проверял в chrome, firefox. Искомая страница, с которой сделан скриншот Ссылка на страницу

Ответ

Вы не указали стили к классу .row
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
Результат:

Обновление 0.0.1:
На предоставленном ресурсе возможно поправить верстку внеся вот такие изменения:
Удалите css код:
.h-100[_ngcontent-c3] { height: 100% !important; } .h-100 { height: 100%!important; }
Если нет возможности удалить, замените на height: auto important;
После для выравнивания вы можете написать:
.portfolio-item[_ngcontent-c3] { margin-bottom: 30px; display: flex; }
И если размер картинок будет всегда один сделать вот так:
.card.h-100 img { max-height: 200px; }
В итоге вы получите вот такой результат:
Вариант №1 С картинкой но битой ссылкой
Вариант №2 Полностью без картинки(без тега < img >)