CODEWITHSUNDEEP
angularangular-forms
Gallo
Gallo

Reputation: 185

FormGroup ERROR TypeError: Cannot read property 'get' of undefined

I am trying to get a value from my form and I am getting this error: ERROR TypeError: Cannot read property 'get' of undefined

 addMessage: FormGroup;
 get message(){ return this.addMessage.get('message').value}

Html:

 <form [formGroup]="addMessage" (ngSubmit)="sendMessage()">
      <input formControlName="message" class="input" type="text">
      <button type="submit" class="button is-primary">Send</button>
  </form>

Upvotes: 9

Views: 80710

Answers (7)

Maria Neves
Maria Neves

Reputation: 1

If anyone is still struggling with this question, in my case, what worked was add a:

if (this.form) {
 //get function
}

And the code will assume that it can only get it if exists.

Upvotes: 0

Kartik Dolas
Kartik Dolas

Reputation: 761

Check with name of form whether it is matching in HTML file and in Typescript file where the formbuilder group is initialized.

In my case this was the only mistake.

app.component.html

<form [formGroup]="FormName">
    ```
    ```
</form>

app.component.ts

FormName = this.fb.group({
    name: [],
    age: [],
    city: [],
})

The FormName should be uniform throughout.

Upvotes: 0

Th&#233;o T. Carranza
Th&#233;o T. Carranza

Reputation: 8459

The approach I'd suggest is this:

First: Import the ReactiveFormsModule into the module that offers the component (the one you are importing the component that has the form into)

Second: Import FormGroup and FormBuilder into your form component

Third: declare the variable that will be your form name, as such: public myFormName: FormGroup;

Pleace notice that I have given the variable the FormGroup type. At the template, you will assign the content of your form to this variable (make sure it is public, not private), like this:

  <form [formGroup]="myFormName">

Forth: Declare, at the component's constructor, a private variable with the type "FormBuilder", as such:

constructor(private readonly formBuilder: FormBuilder)

Fifth: create a public method that will 'create' your reactive form, something like this:

createForm(): void {
    this.form = this.formBuilder.group(
      {
        name: [''],
        gender: [''],
        birth_date: ['']
      },
    );
  }

Make sure the property name maps a formControlName in your template. Initialize each property with a ' ' value, or the initial value you want it to have (make sure it is of the same type declared on the template)

Last: Call the form creation method on the component's constructor, so the form will be instantiated when the template renders.

Bonus round: If your form is simple, consider using template driven forms. Reactive forms are more robust, and meant to be used when you need to have more control over your form.

Read more here: https://angular.io/guide/reactive-forms

Upvotes: 1

Shoyeb Memon
Shoyeb Memon

Reputation: 1159

You did was everything right, but you need to build a FormBuilder too.

Kindly follow my method of getting data from a form.

html: 

<form [formGroup]="WordpressForm">

 <div class="form-group">
   <mat-form-field class="example-full-width">
     <input matInput placeholder="Title" [(ngModel)]='title' formControlName='title'>
   </mat-form-field>
   <div>        
   <button (click)="save()">Save</button>
  </div>
 </div>
</form>

ts:

constructor(private fb: FormBuilder) {}

WordpressForm = this.fb.group({
  title: ['', [Validators.required]]
});

getTitle() {
 return this.WordpressForm.get('title');
}

save() {
 const template_Title = this.title;
 console.log(template_Title);
}

Upvotes: 13

user9456191
user9456191

Reputation: 

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

define instance 

addMessage: FormGroup;

this.addMessage = new FormGroup({

      message: new FormControl('', [Validators.required])  });


get getMeassageValue() {
    return this.addMessage.get('message').value;
  }

Upvotes: 0

user7867717
user7867717

Reputation: 283

You can try this : 

import { FormControl } from '@angular/forms';

...

addMessage = new FormGroup({
    message: new FormControl()
});

get message(){ 
  const messageControl = this.addMessage.controls['message'];
  return messageControl.value;
}

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86740

Use this

return this.addMessage.controls['message'].value

For more information you can play here on official playground of form in angular

Upvotes: 3

Related Questions