Angular Material Slide Toggle不更改绑定变量

Question

我有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，并且不会更改。

我已经创建了一个blitz，并且在相同的代码下可以正常工作，所以我不确定为什么我的页面上出现了这些问题。

控制台显示：

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

编辑：我更新了stackblitz以包括表单的html，现在它不起作用了。

Answer 1

您的updated stackblitz无法重新创建您共享的问题...但是从您的问题来看，以下两个问题已针对表单解决，并且样式也已完成：

• 默认情况下，直到单击切换开关后，切换开关的值才会显示
• 切换值未更改
• 现在正在根据切换值更新样式

相关的 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>

检查最低限度的working demo here，以了解您要尝试的内容...希望能对您有所帮助...

Answer 2

我删除了模板中除if(isChecked) { setTheme(R.style.RedTheme); } else{ setTheme(R.style.GreenTheme); } 之外的所有内容，它可以按预期工作。

我认为问题是因为您的html模板正在引用组件所没有的方法或属性，或者试图在某处访问mat-slide-toggle或null的属性导致了此问题。

检查您的控制台中的错误，如果您修复了这些错误，则滑动开关应可按预期工作。