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

Question

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

HTML:

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

component.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);
}

在这里,我在控制台中获得空值.请帮忙

Answer 1

添加formControlName到输入

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

现在按名称访问该值

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

Answer 2

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

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

name您授予控件的访问权限：

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