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

Question

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

using "let firstname" , "let lastname" , "let email" I am getting error [tslint] Identifier 'firstName' is never reassigned; use 'const' instead of 'let'. (prefer-const)

Using debugger I am getting error [tslint] Use of debugger statements is forbidden (no-debugger)

Also in the console I am getting error Cannot read property 'value' of undefined

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

Cannot read property 'value' of undefined error

是因为

您已将 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

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

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

Answer 4

For disable Use of debugger statements is forbidden warning apply this rule ,n tsconfig.json:

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

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

Getting error in fetching value of template driven Angular form

angular

angular-forms