Angular Material Slide Toggle не изменяет связанную переменную
У меня 2 странные проблемы. У меня есть большая форма с большим количеством полей ввода. Это прекрасно работает. Я хочу добавить ползунковый переключатель внизу, который изменяет переменную, которая будет влиять на стили всей формы.
Моя первая проблема заключается в том, что переменная не будет отображаться до тех пор, пока не будет нажат переключатель слайдера.
HTML
<mat-slide-toggle [(ngModel)] = "ifPrint" name = "ifPrint" id = "ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
КОМПОНЕНТ
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
переменная ifPrint пуста при загрузке страницы
Вторая проблема
при нажатии переключателя слайдера div, содержащий переменную, отображается как истина, но когда я нажимаю переключатель в положение «выключено», переменная ifPrint остается истинной и не изменяется.
Я создал блиц, и он отлично работает там с тем же кодом, поэтому я не уверен, почему у меня возникают эти проблемы на моей странице.
Консоль говорит:
Error: No value accessor for form control with name: 'ifPrint'
Обновлено: я обновил stackblitz, чтобы включить html формы, и теперь он не работает.
Хорошо, я попробую это.
Stackblitz не показывает ваш результат. Обновите его.
Я только что обновил Stackblitz, и теперь он не работает, как и на моей машине. Итак, проблема воспроизведена. Кнопка-переключатель внизу больше не работает, а переменная ifPrint не отображается. stackblitz.com/edit/angular-mvpfu5-dsfytx
@PaulLeppard, проверьте ответ ниже, вы можете расширить его ... дайте мне знать в случае каких-либо проблем
Ответы 2
Я удалил все в вашем шаблоне, кроме mat-slide-toggle, и он работает, как и ожидалось.
Я считаю, что проблема в том, что ваш html-шаблон ссылается на методы или свойства, которых нет в вашем компоненте, или попытка доступа к свойству null или undefined вызывает проблему.
Проверьте свою консоль на наличие ошибок, и если вы их исправите, ползунковый переключатель должен работать должным образом.
Спасибо за ответ, но это то, где я был изначально. Я добавил форму, чтобы воспроизвести проблему на моем локальном компьютере. Я буду удалять разные разделы формы до тех пор, пока она не продолжит работу по выявлению проблемного кода.
Я просмотрел код и удалил все неопределенные переменные, и кнопка работает, поэтому я считаю, что вы правы, говоря, что это источник проблемы. Мне просто нужно пройти через всю форму, чтобы найти их.
Я прошел весь код и удалил все нулевые значения. Затем я удалил весь код в компоненте, кроме ползунка материала, и все равно получаю сообщение об ошибке: Ошибка: нет средства доступа к значению для элемента управления формой с именем: «ifPrint». Мой компонент полностью пуст, кроме переключателя слайдов мата, и я все еще получаю сообщение об ошибке.
Ваш обновленный стекблиц не смог воссоздать проблему, которой вы поделились... Но, судя по вашему вопросу, следующие две проблемы решаются для формы, а также выполняется стиль:
- значение переключателя не отображалось по умолчанию, пока переключатель не был нажат
- значение переключения не изменилось, когда вы переключили его
- стиль теперь обновляется на основе значения переключателя
соответствующий ТС:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
соответствующий HTML:
<form (ngSubmit) = "formSubmit()" #demoForm = "ngForm" >
<div [ngClass] = "model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type = "text" placeholder = "Enter Name" #name = "ngModel" [(ngModel)] = "model.name" name = "name" />
<br/>
<input type = "number" placeholder = "Enter Age" #age = "ngModel" [(ngModel)] = "model.age" name = "age" /> <br/>
<mat-slide-toggle #ifPrint #age = "ngModel" [(ngModel)] = "model.ifPrint" name = "ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type = "submit"> Submit </button>
</form>
проверьте минимальный рабочая демонстрация здесь для того, что вы пытаетесь... надеюсь, это поможет...
Спасибо Акбер. Это доказывает, что то, чего я пытаюсь достичь, может работать. Я и мои коллеги по работе озадачены тем, почему это не сработает, если вы скопируете точный код в мое приложение. Я не уверен, что с этим делать. Если я создаю новое приложение, оно работает. Мне нужно продолжать искать причину.
Можете ли вы воссоздать ошибку/проблему, которую вы получаете на stackblitz?
Нет не могу к сожалению. Это не происходит на StackBlitz. Должно быть что-то в моей конфигурации приложения. Без загрузки большого количества конфиденциальной информации о клиенте в stackblitz я не смогу ее воспроизвести. Поскольку ваш ответ работает и делает то, что я собираюсь сделать, я приму его, но я все еще не понимаю, почему он не работает в моем приложении. Я нашел обходной путь, используя событие щелчка, чтобы изменить переменную ifPrint, так что пока это нужно сделать. Слишком много работы, чтобы тратить больше на эту странную проблему. Спасибо за вашу помощь.
Моя интуиция подсказывает мне проверить версию пакетов узлов — ваш код или stackblitz, который работает; Я говорю это, потому что это работает для вашего нового проекта; Кроме того, мне любопытно узнать, изменили ли вы какие-либо пакеты узлов вашего приложения на этапе разработки?
обновите свой stackblitz с помощью
<form>и некоторых полей в форме ... возможно, есть какая-то связь, которая не отражена в минимальном минимуме SB