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.

1. Component

           import { Component, OnInit, Inject } from '@angular/core';
           import { FormGroup, FormControl, Validators, FormBuilder, AbstractControl } from '@angular/forms';
   
           @Component({
             selector: 'app-new-record',
             templateUrl: './new-recordponent.html',
             styleUrls: ['./new-recordponent.css']
           })
           export class NewRecordComponent implements OnInit {
             myFormGroup: FormGroup;
             constructor(private formBuilder: FormBuilder) {
               this.myFormGroup = this.formBuilder.group({
                 name: new FormControl('', Validatorspose([
                   Validators.required
                 ])),
                 claz: new FormControl('BCA'),
                 admissionYear: new FormControl(Validatorspose([Validators.required]))
               });
             }
   
             ngOnInit() {
   
             }
   
             onSubmit(student) {
               console.log('onSubmit called !');
             }
   
           }
   

   2. 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>
      

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.

1. 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.ponent.html',
             styleUrls: ['./new-record.ponent.css']
           })
           export class NewRecordComponent implements OnInit {
             myFormGroup: FormGroup;
             constructor(private formBuilder: FormBuilder) {
               this.myFormGroup = this.formBuilder.group({
                 name: new FormControl('', Validators.pose([
                   Validators.required
                 ])),
                 claz: new FormControl('BCA'),
                 admissionYear: new FormControl(Validators.pose([Validators.required]))
               });
             }
   
             ngOnInit() {
   
             }
   
             onSubmit(student) {
               console.log('onSubmit called !');
             }
   
           }
   

   2. 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>
      

• javascript
• angular
• angular2-forms

1 Answer 1

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

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