угловой материальный коврик-скользящий переключатель внутри поля формы-коврика

Если у меня есть mat-slide-toggle внутри поля mat-form-field, я получаю сообщение об ошибке:

Ошибка: поле mat-form должно содержать MatFormFieldControl

Я хочу, чтобы мой коврик-слайд-переключатель находился внутри поля формы-коврика, чтобы я мог получить стиль. Есть идеи, почему я получаю эту ошибку? Разве тумблер-ползунок - это не поле-мат-форма ???

Вот пример того, что у меня сейчас есть:

<mat-form-field fxFlexFill *ngSwitchCase="'mat-slide-toggle'">
    <mat-slide-toggle>{{el.text}}</mat-slide-toggle>
</mat-form-field>

angular angular-material
person Kevin192291    schedule 06.05.2019    source источник
comment
Эта ошибка возникает, если вы не добавили элемент управления полем формы в поле формы. Если ваше поле формы содержит собственный элемент ‹input› или ‹textarea›, убедитесь, что вы добавили к нему директиву matInput и импортировали MatInputModule.   -  person Sourav Dutta    schedule 06.05.2019
comment
ой, так что похоже, что переключатель скольжения коврика не может быть помещен внутри поля формы коврика ... это не очень хорошо.   -  person Kevin192291    schedule 06.05.2019
comment
Этот stackblitz показывает ползунок вне секции mat-form-field   -  person Kevin192291    schedule 06.05.2019
comment
@SouravDutta ни один из ваших примеров не отвечает на вопрос оператора. Прочтите, пожалуйста, внимательнее.   -  person Saturn K    schedule 30.12.2020

Ответы (5)


arrow_upward
18
arrow_downward

Я представляю два немного разных хака с без подчеркивания, основанные на нескольких ответах.

Ярлык выше с расширенным интерактивным пустым пространством, использует CSS

введите описание изображения здесь

<mat-form-field floatLabel="always" appearance="none">
  <mat-label>Override Speed</mat-label>
  <mat-slide-toggle [(ngModel)]="Override"><span class="text-invisible">Override Speed</span></mat-slide-toggle>
  <textarea matInput hidden></textarea>
</mat-form-field>

.text-invisible {
  opacity: 0;
}

Ярлык справа, без css

введите описание изображения здесь

<mat-form-field floatLabel="always" appearance="none">
  <mat-slide-toggle [(ngModel)]="Override">Override Speed</mat-slide-toggle>
  <textarea matInput hidden></textarea>
</mat-form-field>
person pcnate    schedule 11.12.2019
comment
Это именно то, что я искал. Спасибо! - person LorisBachert; 10.08.2020

arrow_upward
6
arrow_downward

Однако вы можете поместить скрытое текстовое поле внутри поля mat-form-field, чтобы удовлетворить требованиям, и, при необходимости, связать все значения вместе, если вы хотите, чтобы они выглядели так же, как другие поля.

<mat-form-field floatLabel="always">
        <mat-label>Label</mat-label>
        <mat-slide-toggle>Raw</mat-slide-toggle>
        <textarea matInput hidden></textarea>
    </mat-form-field>
person Ronnie    schedule 11.09.2019
comment
Как при этом избавиться от подчеркивания? - person Robert; 12.11.2019
comment
@Robert добавить appearance="none" в <mat-form-field> - person pcnate; 11.12.2019
comment
@ Роберт, я использовал .mat-form-field-underline { display: none; } - person Wungsow; 04.03.2020

arrow_upward
1
arrow_downward

Попробуйте добавить скрытое поле ввода

<mat-form-field>
  <mat-slide-toggle class="example-margin" [color]="color" [checked]="checked"
    [disabled]="disabled">
    Cumulative
  </mat-slide-toggle>
  <input matInput #value hidden />
</mat-form-field>
person Nathan    schedule 30.10.2019
comment
как при этом избавиться от подчеркивания? - person Robert; 12.11.2019
comment
@Robert либо через css, либо установив недопустимое значение для ввода [appearance] поля формы, например <mat-form-field class="w100p" [appearance]="'nope'">. Таким образом, стили подчеркивания css применяться не будут (как показано в источник) - person Luxor001; 14.11.2019

arrow_upward
0
arrow_downward

Согласно официальной документации, вы не можете этого сделать (ссылка).

Следующие компоненты Angular Material предназначены для работы внутри <mat-form-field>:

  • <input matNativeControl> & <textarea matNativeControl>
  • <select matNativeControl>
  • <mat-select>
  • <mat-chip-list>
person Francesco    schedule 28.08.2019
comment
проверьте эту ссылку в разделе Использование с @ angular / forms: material.angular.io/components/ слайд-переключатель / обзор - person Bilal Djaghout; 11.12.2019
comment
@BilalDjaghout <mat-form-field> работает с текстовыми полями. <mat-slide-toggle> не является текстовым полем. - person Francesco; 05.02.2020

arrow_upward
-2
arrow_downward

К сожалению, Mat-Form-Fields не работают / функционируют, когда внутри них находится переключатель mat-slide. Мне пришлось самому выяснить это на собственном горьком опыте.

Попробуйте вместо этого:

<div fxFlexFill *ngSwitchCase="'mat-slide-toggle'">
    <mat-slide-toggle>{{el.text}}</mat-slide-toggle>
</div>
person aidan22    schedule 12.06.2019
comment
это неверно удаленно, вы можете добавить скрытое поле ввода <input matInput #value hidden /> - person Nathan; 30.10.2019