Question

在寄存器函数中，我在存储表单控件的值时遇到错误。

使用“我的名字”，“我的名字”，“我的电子邮件”   错误 [tslint]永远不会重新分配标识符“ firstName”；采用   'const'而不是'let'。（首选常量）

使用调试器时出现错误 [tslint]调试器的使用   语句被禁止（无调试器）

也在控制台中出现错误无法读取属性“值”   不确定的

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

@Component({
  selector: 'app-temp-driven',
  templateUrl: './temp-driven.component.html',
  styleUrls: ['./temp-driven.component.css']
})
export class TempDrivenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  register(regForm: any) {
    debugger;
    let firstName =  regForm.control.firstname.value;
    let lastname = regForm.control.lastname.value;
    let email = regForm.control.email.value;

    alert(firstName);
   console.log(regForm);

  }

}

HTML->

<div class="container">
  <div class="row">
    <div class="form-bg">
      <form #regForm ='ngForm' (ngSubmit) ="register(regForm)">
       <h2 class="text-center"> Registeration Form </h2>
      <br/>
      <div class="form-group">
       <input type="text" class="form-control" placeholder="First Name" name="firstname" ngModel>
      </div>  


      <div class="form-group">
          <input type="text" class="form-control" placeholder="last Name" name="lastname" ngModel>
         </div>  


      <div class="form-group">
          <input type="text" class="form-control" placeholder="Eamil Id" name="email" ngModel>
         </div>  

          <br/>

          <div class="align-center">
            <button type="submit" class="btn btn-primary" id="register"> Register </button>
          </div>
          </form>   
      </div>  
  </div>
</div>

Answer 1

由于错误提示您未在使用firstName，因此未将其分配给任何变量，只需将其更改为const即可，

const firstName =  regForm.control.firstname.value;
const lastname = regForm.control.lastname.value;
const email = regForm.control.email.value;

使用const的原因是该值不会在代码块内更改，而使用let则允许更改该变量。

Answer 2

无法读取未定义错误的属性“值”

是因为

您已将controls写为control。替换它，它应该可以工作。

register(regForm: any) {
    debugger;
    let firstName =  regForm.controls.firstname.value;
    let lastname = regForm.controls.lastname.value;
    let email = regForm.controls.email.value;    
   alert(firstName);
   console.log(regForm);    
}

您可以忽略第一个警告，或者将let更改为const也可以，因为设置它们后您无需修改它们。

Answer 3

谢谢，我得到了bug，在这里我使用了regForm.control，而我错过了s控件。所以会有

let firstName = regForm.controls.firstname.value; 让lastname = regForm.controls.lastname.value; 让email = regForm.controls.email.value;

Answer 4

要禁用禁止使用调试器语句，请应用此规则，n tsconfig.json：

"rules": {
    "no-debugger": false,
    //... 
}

获取模板驱动的Angular表单的值时出现错误

4 个答案: