Angular 2 : ERROR TypeError: Cannot read property 'value' of undefined

Question

I am getting the following error on browser console after clicking on Submit button.

In this application I am trying to get information about the Student uploaded code below. I am unable to find why this error is shown on console. I have correctly added the formControlName.

Component

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

        @Component({
          selector: 'app-new-record',
          templateUrl: './new-record.component.html',
          styleUrls: ['./new-record.component.css']
        })
        export class NewRecordComponent implements OnInit {
          myFormGroup: FormGroup;
          constructor(private formBuilder: FormBuilder) {
            this.myFormGroup = this.formBuilder.group({
              name: new FormControl('', Validators.compose([
                Validators.required
              ])),
              claz: new FormControl('BCA'),
              admissionYear: new FormControl(Validators.compose([Validators.required]))
            });
          }

          ngOnInit() {

          }

          onSubmit(student) {
            console.log('onSubmit called !');
          }

        }

Template

    <form [formGroup]="myFormGroup"
    (ngSubmit)="onSubmit(form.value)">
        <div class="form-group">
            <label for="claz">Class:</label> <select name="claz" formControlName="claz">
                <option value="MCA">MCA</option>
                <option value="BCA">BCA</option>
                <option value="M.Sc">M.Sc</option>
                <option value="B.Tech">B.Tech</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name">Name:</label> <input type="text"
                class="form-control" id="name" formControlName="name">
        </div>
        <div class="form-group">
            <label for="admissionYear">Admission Year:</label> <input type="number"
                class="form-control" id="admissionYear" formControlName="admissionYear">
        </div>
        <button type="submit" class="btn btn-default" >Submit</button>
    </form>

Pankaj Parkar · Accepted Answer · 2017-05-14 08:28:23Z

5

There is no form defined, instead use myFormGroup which has been defined as formGroup

(ngSubmit)="onSubmit(myFormGroup.value)"

answered May 14, 2017 at 8:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Tushar Girase Over a year ago

Thanks a lot man. I wasted 5 hours to resolve this. I would have asked this question earlier.

Pankaj Parkar Over a year ago

@TusharGirase np, that happens with dev. Glad to hear it helped, Thanks :)

Collectives™ on Stack Overflow

Angular 2 : ERROR TypeError: Cannot read property 'value' of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related