Угловой материал Расширение прочности пароля - PullRequest
0 голосов
/ 02 мая 2019

Это расширение @ angular-material-extensions / прочность пароля действует как дива.Я помещаю все в div скажем style="text-align:center;", и это буквально работает.Но я также получил класс CSS для ширины каждого компонента, и это не будет применяться.

enter image description here

Кроме того, если я покажу все требования, это размервсего степпера.Панель просто не принимает полный размер, потому что я уже использовал немного CSS там, но это не может быть реальным решением.

<mat-horizontal-stepper linear="true" #stepper>
      <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="registerForm" class="form" novalidate>
          <div style="text-align:center;">
            <ng-template matStepLabel>{{ 'REGISTRATION.STEPPER_LOGIN' | translate }}</ng-template>
            <mat-card-subtitle>
              <mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}">
                {{ 'REGISTRATION.PASSWORDREQUIREMENTS' | translate }}</mat-slide-toggle>
            </mat-card-subtitle>

            <mat-form-field class="full-width" [color]="passwordComponent.color">
              <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
              <input matInput maxlength="25" [type]="toggle.type" required
                placeholder="{{ 'REGISTRATION.PASSWORD' | translate }}" #password formControlName="password"
                type="password" />
              <mat-hint style="color: red" *ngIf="capslockOn" align="start" aria-live="polite">
                <strong>{{ 'CAPSLOCK' | translate }}</strong>
              </mat-hint>
              <mat-hint align="end" aria-live="polite">
                {{password.value.length}} / 25
              </mat-hint>
              <mat-error *ngIf="formErrors.password" class="form__error">{{ formErrors.password }} </mat-error>
            </mat-form-field>
            <mat-password-strength class="full-width" #passwordComponent min="4" [password]="password.value">
            </mat-password-strength>

            <mat-password-strength-info class="full-width" *ngIf="showDetails" [passwordComponent]="passwordComponent">
            </mat-password-strength-info>
          </div>
        </form>
      </mat-step>

Используемые мной классы CSS:

::ng-deep .mat-progress-bar {
  width: 27% !important;
}

.full-width {
  width: 80%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...