Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

Question

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is

TypeError: Cannot read property 'value' of undefined

. This project involves the use of Angular and Express JS. In the server side, the query looks like this: app.post('/post', ...){

let sql = 'INSERT INTO results(question1, question2, question3)values("'+req.body.question1+'", "'+req.body.question2+'", "'+req.body.question3+'")';

}. The questions and options are already organized in a JSON file.

//data.json

[{
  "surveyid": 101,
  "surveyname": "Vitamin",
  "createdby": "Dr. Sarah",
  "createddate": "16-01-2018",
  "question": [{
      "questionid": 1,
      "questiondesc": "Q-1?",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    },

    {
      "questionid": 2,
      "questiondesc": "Q_2?",
      "qno": 2,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        },
        {
          "options": "C",
          "answer": "Don't know"
        }
      ]
    },

    {
      "questionid": 3,
      "questiondesc": "Q_3",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    }
  ]
}]

Subsequently, I populate all the questions and options into the HTML template.

<form>
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" name="question{{items2.questionid}}" [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="submitResults(question1.value, question2.value, question3.value)">SUBMIT</button>
  </div>
</form>

Additionally, here are the service and component files:

//service.ts
getJsonData(): Observable < any > {
  return this.http.get('../assets/data.json')
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'server returns error'))
}

submitResults(question1: string, question2: string, question3: string) {
  return this.http.post('http://localhost:8000/newPush', {
    question1: question1,
    question2: question2,
    question3: question3
  });
}

//component.ts
jsonData = [];
getJsonData() {
  this.AppService.getJsonData().subscribe(
    data => console.log('json', this.jsonData = data),
    error => console.log('server returns error')
  );
}

submitResults(question1: string, question2: string, question3: string) {
  this.AppService.submitResults(question1, question2, question3);
}

If possible, could someone assist me with this issue? Please let me know if additional code snippets are required.

javascript html angular typescript express

Answer 1

Answer №1

If you're not utilizing angular forms, you can retrieve values by accessing the form elements collection:

To start, you must grab the form element.

<form #myForm>

From there, you can access the values of the elements like this:

form.elements['question1'].value

Check out an example of a Native Form

Create an Angular template-driven form

1) Import FormsModule to your NgModule

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

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
})
export class AppModule { }

2) Add a property of type Array in your component

answers: string[] = [];

3) Modify the template as follows:

<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

View an example of a Template-driven Form

Implement an Angular model-driven Form

1) Similarly, import ReactiveFormsModule to your NgModule

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

@NgModule({
  imports: [
    ...
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

2) Set up a FormGroup in your component

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

@Component({
  ...
})
export class AppComponent {

  form: FormGroup;
  ...

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      question1: '',
      question2: '',
      question3: ''
    })
  }

  pushResults(formValue) {
    console.log(formValue.question1, formValue.question2, formValue.question3);
  }
}

3) Adjust the template accordingly:

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

See a Model-driven Form Example

If you just need one form, there's no need to import FormsModule or ReactiveFormsModule. However, for larger projects, it's recommended to leverage one of Angular's built-in methods.

Answer 2

If you're not utilizing angular forms, you can retrieve values by accessing the form elements collection:

To start, you must grab the form element.

<form #myForm>

From there, you can access the values of the elements like this:

form.elements['question1'].value

Check out an example of a Native Form

Create an Angular template-driven form

1) Import FormsModule to your NgModule

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

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
})
export class AppModule { }

2) Add a property of type Array in your component

answers: string[] = [];

3) Modify the template as follows:

<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

View an example of a Template-driven Form

Implement an Angular model-driven Form

1) Similarly, import ReactiveFormsModule to your NgModule

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

@NgModule({
  imports: [
    ...
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

2) Set up a FormGroup in your component

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

@Component({
  ...
})
export class AppComponent {

  form: FormGroup;
  ...

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      question1: '',
      question2: '',
      question3: ''
    })
  }

  pushResults(formValue) {
    console.log(formValue.question1, formValue.question2, formValue.question3);
  }
}

3) Adjust the template accordingly:

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

See a Model-driven Form Example

If you just need one form, there's no need to import FormsModule or ReactiveFormsModule. However, for larger projects, it's recommended to leverage one of Angular's built-in methods.

Answer 3

Answer №2

Avoid using this within templates as it should only be used within components. In templates, all variables are expected to be component or class variables. Local variables cannot be accessed in templates. Instead, access member variables directly like this:

(click)="pushResults(question1.value, question2.value, question3.value)"

Answer 4

Avoid using this within templates as it should only be used within components. In templates, all variables are expected to be component or class variables. Local variables cannot be accessed in templates. Instead, access member variables directly like this:

(click)="pushResults(question1.value, question2.value, question3.value)"

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

Answer №1

Create an Angular template-driven form

Implement an Angular model-driven Form

Answer №2

Similar questions

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

The dropdown on my website is malfunctioning

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

Multer not running when file is uploaded in Node.js with Express using FormData

Discover the solution for seamless integration of TypeScript with the novel `exports` and `main` field

Generate interactive tables using data from an XML file

beforeSend method in jquery ajax synchronously calling

Issue: The spy MovieService.getWatchListedMovies was expected to have been called during the angular Unit Testing, but it was

Incorrect JavaScript switch case usage

issue with eval() function

Do you need to align images side by side and have clickable images positioned beneath each one?

Issues with navigation in React Native Typescript

Error: Kinetic.js cannot upload image to canvas

Unexpected lint errors are being flagged by TS Lint in Visual Studio Code out of nowhere

How to retrieve the value from an editable td within a table using Jquery

The local machine is unable to access credentials from the /.aws/credentials directory

Trigger an event upon completion of a write operation in AngularJS

Is it secure to utilize Http.Get (with parameters) for accessing WebApis in Angular 2/4?

Error: an empty value cannot be treated as an object in this context when evaluating the "businesses" property

Unlocking the Power of $http and Stream Fusion