How to read form values in controller?

Add formControlName to input 

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

Now access the value by name

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


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


@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html'
})

export class regComponent implements OnInit {

private regForm:any;
    constructor(private formBuilder: FormBuilder) { 
    }
    ngOnInit(){
        this.regForm=formBuilder.group({
          firstName:['', Validators.required]
         })
    }

     saveUser() {
        if (this.regForm.dirty && this.regForm.valid) {
          alert(`FirstName: ${this.regForm.value.firstName}`);
        }
      }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form [formGroup]="regForm" (submit)="saveUser()" >
          <label for="txtFName">First Name</label>
          <input type="text" id="txtFName"  formControlName="firstName" #firstName="ngControl"/>
          <button type="submit" [disabled]="!userForm.valid">Submit</button>
        </form>

For below control, named email:

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

Access by the name you gave to the control:

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

Tags:

Angular

Recent Posts