Угловое переключение материала слайда без изменения связанной переменной - PullRequest
Новая
       19

Угловое переключение материала слайда без изменения связанной переменной

0 голосов
/ 26 апреля 2019

У меня 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, содержащий переменную, отображается как true, но когда я нажимаю переключатель в положение выключения, переменная ifPrint остается как true и не изменяется.

Я создал блиц , и там он работает нормально с тем же кодом, поэтому я не уверен, почему у меня такие проблемы на моей странице.

Консоль говорит: 

Error: No value accessor for form control with name: 'ifPrint'

РЕДАКТИРОВАТЬ: я обновил stackblitz, чтобы включить HTML формы, и теперь он не работает.

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Ваш обновленный stackblitz не может воссоздать проблему, которой вы поделились ... Но из вашего вопроса, следующие 2 проблемы решаются для формы, и стилизация также выполнена:

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

релевантное TS : 

  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>

отметьте минимальное значение, рабочая демоверсия здесь за то, что вы пытаетесь ... надеюсь, это поможет ...

0 голосов
/ 26 апреля 2019

enter image description here

Я удалил все в вашем шаблоне, кроме mat-slide-toggle, и он работает как положено.

Я считаю, что проблема в том, что ваш HTML-шаблонссылается на методы или свойства, которых нет у вашего компонента, или пытается получить доступ к свойству null или undefined где-то, что вызывает проблему.

Проверьте консоль на наличие ошибок, и если вы исправите их, ползунковый переключатель должен работать как положено.

...