angular reactive forms undefined value

Question

I am trying to display the value as it is being entered in a text box but I am getting a "ERROR TypeError: Cannot read property 'value' of undefined" error.

Here is my my registered formControls in my component:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-site-reset',
  templateUrl: './site-reset.component.html',
  styleUrls: ['./site-reset.component.scss']
})
export class SiteResetComponent {
  siteResetForm = new FormGroup({
    attuid: new FormControl(''),
    contactNumber: new FormControl(''),
    vendor: new FormControl(''),
    severity: new FormControl(''),
    siteNum: new FormControl(''),
    reasonSelect: new FormControl(''),
    other: new FormControl(''),
    pilot: new FormControl(''),
    alarms: new FormControl(''),
    adjacent: new FormControl(''),
    reset: new FormControl(''),
    anr: new FormControl(''),
    tickets: new FormControl(''),
    other_action: new FormControl(''),
    date: new FormControl(''),
  });

and the beginning of my template where I am trying to print the data entered

<div class="container-fluid">
  <h2>Site Reset (basic) form</h2>

  <div class="row">

    <div class="col-5">
      <div class="p-3 mb-2 bg-primary text-white">
        <form [formGroup]="siteResetForm" (ngSubmit)="onSubmit()">

          <div class="form-group">
            <label>ATTUID:</label>
            <input type="text" class="form-control" placeholder="ATTUID" formControlName="attuid">
          </div>

          <p>
            Value: {{ attuid.value }}
          </p>

John Gallego · Accepted Answer · 2018-11-16 21:40:06Z

2

attuid is not exposed to the template directly. You need to access it by referencing the form group which is exposed to the template.

<p>Value: {{ siteResetForm.controls.attuid.value }}</p>

answered Nov 16, 2018 at 21:40

John Gallego

6917 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rf guy Over a year ago

thank you! that worked. do you mind up voting my question? trying to build reputation.

JuanF · Accepted Answer · 2018-11-16 21:44:03Z

1

You need to use the methods provided in reactive forms:

siteResetForm.get('attuid').value

answered Nov 16, 2018 at 21:44

JuanF

8862 gold badges7 silver badges13 bronze badges

Collectives™ on Stack Overflow

angular reactive forms undefined value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related