如何读取控制器中的表单值？

Question

我是 Angular 2 的初学者，我正在尝试获取组件中文本框的值，但我真的不知道如何获取它。

HTML :

 <form [formGroup]="regForm" >
                <label for="txtFName">First Name</label>
                <input type="text" id="txtFName"/>
</form>

组件.ts：

 import { Component } from "@angular/core"
import { FormControl, FormGroup, FormBuilder, Validator, Validators,ReactiveFormsModule } from "@angular/forms";
import { customer } from '../model/customerModel'
import { Router } from "@angular/router";

export class regComponent
{
    private Customer:customer;
    private regForm:FormGroup;
    private firstName:FormControl;

    constructor (private formBuilder:FormBuilder,private router:Router)
    {

        this.firstName=new FormControl('',[Validators.required])

        this.regForm=formBuilder.group({
        firstName:this.firstName
    })

console.log(this.regForm.value);
}

在这里，我在控制台中得到空值。请在这方面提供帮助

原文由 Dhileepan S J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 formControlName 输入

<input type="text" id="txtFName" formControlName="firstName" />

现在按名称访问值

this.regForm.get('firstName').value

原文由 Sachila Ranawaka 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于以下控件，命名为电子邮件：

 ngOnInit() {
    this.contactForm = this.formBuilder.group({
      email: [null, Validators.compose([Validators.required])]
    });
  }

通过 name 访问你给了控件：

 this.formGroup.controls['email'].value

原文由 abedfar 发布，翻译遵循 CC BY-SA 4.0 许可协议