Angular点击复选框改标题报错：无指定名称表单控件值访问器

嘿，我来帮你搞定这个问题！你遇到的 No value accessor for form control with unspecified name attribute 错误，根源很明确，咱们一步步修复，同时把你的标题修改功能也调试正常：

1. 移除<h2>上的[(ngModel)]绑定 #

[(ngModel)]是Angular专为表单控件（比如input、mat-checkbox这类）设计的双向绑定指令，普通的<h2>标题元素根本不支持它，而且你没给这个元素指定name属性，这直接触发了Angular的表单控件验证错误。

把你的标题代码改成：

<h2>{{captcha}}</h2>

只用插值表达式就能正常展示标题内容，完全不需要双向绑定。

2. 修复变量名不匹配问题 #

你的TS代码里定义的是nom: boolean = true;，但HTML里写的是<mat-checkbox [(ngModel)]="non">——变量名nom和non不一致，这会导致第三个复选框的绑定失效。把HTML里的non改成nom，保持变量名统一：

<mat-checkbox [(ngModel)]="nom" (change)="cocher()">non ?</mat-checkbox>

3. 修正赋值运算符错误 #

在cocher()方法里，你写了this.captcha == "title is changed!"——这是相等比较运算符，不是赋值！要改成单等号的赋值运算符：

if(this.peut === false){
  this.captcha = "title is changed!";
}

我还建议加个else分支，当peut重新勾选时恢复原标题，体验更完整：

if(this.peut === false){
  this.captcha = "title is changed!";
} else {
  this.captcha = "click case for change title";
}

4. 清理无用的错误导入 #

你现在从events模块导入了EventEmitter，还加了@Output()装饰器，但代码里根本没用到这个输出事件。要么删掉这两行无用代码，要么如果确实需要输出事件，要从@angular/core导入EventEmitter（Node.js的events模块和Angular的EventEmitter不是一回事）。这里直接删掉更简洁：

// 删掉这两行：
// import { EventEmitter } from 'events';
// @Output()

5. 确保FormsModule已导入 #

最后别忘了检查你的模块（比如AppModule）里是否导入了FormsModule，因为[(ngModel)]指令属于这个模块，没导入的话也会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ],
  // ...其他配置
})
export class AppModule { }

修改后的完整代码 #

TypeScript（captcha.component.ts）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-captcha',
  templateUrl: './captcha.component.html',
  styleUrls: ['./captcha.component.css']
})
export class CaptchaComponent implements OnInit {
  captcha = "click case for change title";
  peut: boolean = true;
  oui: boolean = true;
  nom: boolean = true;

  constructor() { }

  ngOnInit() { }

  cocher() {
    console.log(this.peut,"**");
    if(this.peut === false){
      this.captcha = "title is changed!";
    } else {
      this.captcha = "click case for change title";
    }
  }
}

HTML（captcha.component.html）

<h2>{{captcha}}</h2>
<div>
  <mat-checkbox [(ngModel)]="peut" (change)="cocher()">peut-être ?</mat-checkbox>
  <mat-checkbox [(ngModel)]="oui" (change)="cocher()">oui ?</mat-checkbox>
  <mat-checkbox [(ngModel)]="nom" (change)="cocher()">non ?</mat-checkbox>
</div>

这样修改后，你的标题就能正常显示，点击peut-être ?复选框时也会正确切换标题内容，那个烦人的错误也会消失啦～

内容的提问来源于stack exchange，提问作者wtimi