Angular4与.NET Core注册表单报错：Cannot find value email of undefined

让我们一步步拆解你遇到的问题：

1. 核心错误：Model未初始化导致undefined #

你在组件里定义model的方式只是类型声明，并没有实际创建一个对象实例：

model: { email: 'NONE', password: 'NONE', agree: false };

这行代码只是告诉TypeScriptmodel应该是什么结构，但model本身还是undefined。当Angular尝试执行[(ngModel)]="model.email"时，自然会报错“Cannot find value email of undefined”——因为model根本不存在。

修复方法：初始化model为一个实际的对象：

model = { email: 'NONE', password: 'NONE', agree: false };

2. 双向绑定语法错误 #

你写的([ngModel])是反向的，Angular的双向绑定语法是括号在外，方括号在内（俗称“香蕉在盒子里”），正确写法是[(ngModel)]。

比如你的输入框应该改成：

<input class="simple-article" type="text" name="email" [(ngModel)]="model.email" placeholder="Your email" />

（模板变量#email其实可以去掉，因为我们已经通过ngModel绑定到了组件的model对象）

3. 简化onRegClicked函数 #

既然已经用ngModel把输入值绑定到了this.model，你完全不需要通过模板变量传参，直接在函数里读取this.model即可，代码更简洁：

修改后的onRegClicked：

onRegClicked() {
  const { email, password, agree } = this.model;
  if (this.common.hasValue(email) && this.common.hasValue(password)) {
    if (!agree) {
      alert('You must agree to register!');
      return;
    }
    let user = <UserRegistration>{ email: email, password: password };
    this.registerUser({ value: user, valid: true });
  } else {
    alert('Please fill out all the fields!');
    return;
  }
}

对应的HTML按钮也改成：

<a class="btn-success" (click)="onRegClicked()"> Register </a>

完整修改后的关键代码片段 #

组件类（RegistrationComponent） #

export class RegistrationComponent implements OnInit {
  // 正确初始化model对象
  model = { email: 'NONE', password: 'NONE', agree: false };
  validEmail: boolean = true;
  errors: any;
  isRequesting: boolean;
  submitted: boolean = false;

  constructor(private router: Router, private cd: ChangeDetectorRef, private confService: ConfigService, private common: CommonFunctionsService, private appService: AppService) { }

  ngOnInit() { }

  onRegClicked() {
    const { email, password, agree } = this.model;
    if (this.common.hasValue(email) && this.common.hasValue(password)) {
      if (!agree) {
        alert('You must agree to register!');
        return;
      }
      let user = <UserRegistration>{ email: email, password: password };
      this.registerUser({ value: user, valid: true });
    } else {
      alert('Please fill out all the fields!');
      return;
    }
  }

  // 其余代码保持不变...
}

HTML模板 #

<form #regForm="ngForm" >
  <div class="row">
    <div class="col-sm-6">
      <input class="simple-article" type="text" name="email" [(ngModel)]="model.email" placeholder="Your email" />
    </div>
  </div>
  <div class="row" style="margin-top:9px">
    <div class="col-sm-6">
      <input class="simple-article" type="password" name="password" [(ngModel)]="model.password" placeholder="Enter password" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <label class="checkbox-entry">
        <input type="checkbox" name="agree" [(ngModel)]="model.agree" required />
        <span>I agree to the <u><a href="#">Privacy Policy</a></u></span>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <a class="btn-success" (click)="onRegClicked()"> Register </a>
    </div>
  </div>
</form>

额外建议 #

• 如果你想利用Angular表单的验证功能，建议保留novalidate在form标签上，禁用浏览器原生验证，用Angular的表单验证替代。
• 可以考虑使用响应式表单（Reactive Forms），对于复杂表单来说更易维护和测试，但作为新手，先掌握模板驱动表单也是没问题的。

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