Angular Material Slide Toggle 不改变绑定变量

Posted 2023-02-22

【中文标题】Angular Material Slide Toggle 不改变绑定变量

【英文标题】：Angular Material Slide Toggle not changing bound variable

【发布时间】：2019-09-15 18:37:03

【问题描述】：

我有两个奇怪的问题。我有一个带有很多输入字段的大表单。这很好用。我想在底部添加一个滑动切换，它会改变一个影响整个表单样式的变量。

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

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，现在它无法正常工作。

【问题讨论】：

用<form> 和表单中的一些字段更新你的stackblitz......也许有一些连接没有反映在最低限度的SB中

好的，我会试试的。

Stackblitz 没有显示你的结果。请更新它

我刚刚更新了 Stackblitz，现在它无法正常工作，和我的机器上一样。所以问题已经重现。底部的切换按钮不再起作用，并且 ifPrint 变量不显示。 stackblitz.com/edit/angular-mvpfu5-dsfytx

@PaulLeppard，检查下面的答案，你可以扩展它......如果有任何问题，请告诉我

【参考方案1】：

您的updated 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>

检查一个最小值，working demo here 你正在尝试什么......希望它有帮助......

【讨论】：

谢谢阿克伯。这确实证明了我想要实现的目标是可行的。当您将确切的代码复制到我的应用程序中时，我和我的同事对为什么它不起作用感到困惑。我不知道该怎么办。如果我创建一个新应用程序，它就可以工作。我需要继续寻找原因。

你能重现你在 stackblitz 上遇到的错误/问题吗？

不，很遗憾，我不能。它不会发生在 StackBlitz 上。我的应用程序配置中一定有一些东西。如果不将大量敏感的客户信息上传到 stackblitz，我将无法复制它。当您的回答有效并按照我的意愿行事时，我会接受它，但我仍然对为什么它在我的应用程序中不起作用感到困惑。我通过使用单击事件来更改变量 ifPrint 找到了一种解决方法，因此现在必须这样做。在这个奇怪的问题上花费太多的工作要做。感谢您的帮助。

我的直觉告诉我检查节点包的版本——你的代码和 stackblitz 哪个有效；我这么说是因为它适用于您的新项目；另外，我很想知道您是否在开发阶段更改了应用程序的任何节点包？

【参考方案2】：

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

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

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

【讨论】：

感谢您的回复，但那是我最初的位置。我添加了表单以在我的本地计算机上复制问题。我将取出表单的不同部分，直到它继续缩小违规代码的范围。

我已经通过代码并删除了所有未定义的变量并且按钮可以工作，所以我相信你说这是问题的根源是正确的。我只需要浏览整个表格即可找到它们。

我已经浏览了整个代码并删除了所有空值。然后，我删除了组件中除材质滑块之外的所有代码，但仍然收到错误消息：错误：表单控件没有值访问器，名称为：'ifPrint'。我的组件除了垫滑动开关之外完全是空的，我仍然收到错误。