Angular Material 滑动切换不改变绑定变量

Question

我有两个奇怪的问题。我有一个包含大量输入字段的大表单。那很好用。我想在底部添加一个滑动开关，它会更改一个会影响整个表单样式的变量。

我的第一个问题是在单击滑动开关之前变量不会显示。

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

我删除了模板中除 mat-slide-toggle 之外的所有内容，它按预期工作。

我认为问题是因为您的 html 模板正在引用您的组件没有的方法或属性，或者试图访问 null 或 [=12 的属性 =] 某个地方导致了这个问题。

检查您的控制台是否存在错误，如果您修复了这些错误，滑动开关应该会按预期工作。

Answer 2

您的 updated stackblitz 无法重现您分享的问题...但是根据您的问题，以下 2 个问题针对表单得到解决，并且还完成了样式设置：

默认情况下不显示切换值，直到单击切换
切换时切换值没有改变
现在正在根据切换值更新样式

相关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 了解您正在尝试的内容...希望对您有所帮助...

Angular Material 滑动切换不改变绑定变量

Angular Material Slide Toggle not changing bound variable

css

typescript

angular-directive

angular-material

angular