Angular Forms not passing data from HTML

Question

I seem to have a problem passing input data from HTML's <select> element to Angular Forms itself.

Here's my code first.

Filename: home-page.component.html

<form [formGroup]="rForm" (ngSubmit)="addPaste(rForm.value)">

    ...

    <div class="input-field col s12">
        <select formControlName="pasteSyntax">
            <option *ngFor="let choices of pasteSyntaxChoices" [value]="choices.value">{{ choices.text }}</option>
        </select>
        <label>Syntax Highlighting</label>
    </div>

    ...

</form>

Filename: home-page.component.ts

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

@Component({
    selector: 'app-home-page',
    templateUrl: './home-page.component.html',
    styleUrls: ['./home-page.component.css']
})

export class HomePageComponent implements OnInit {

    rForm: FormGroup;
    paste: any;

    ...

    pasteSyntax: string = '';

    ...

    pasteSyntaxChoices = [
        { value: "plain", text: "Plain Text" },
        { value: "html", text: "HTML" },
        { value: "css", text: "CSS" },
        { value: "js", text: "JavaScript" },
        { value: "php", text: "PHP" },
        { value: "perl", text: "Perl" },
        { value: "go", text: "Go (Golang)" }
    ];

    constructor(private fb: FormBuilder) {
        this.rForm = fb.group({

            ...

            'pasteSyntax': [null, Validators.required]

            ...

        });
    }

    addPaste(paste) {

        ...

        this.pasteSyntax = paste.syntax;

        ...

        console.log(paste);
    }

    ngOnInit() {}

}

Additional Info:

@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
core-js: 2.4.1
rxjs: 5.4.2
zone.js: 0.8.14

Expected Output (From console.log):

Object
    pasteSyntax: "plain"

Current Output (From console.log):

Object
    pasteSyntax: null

Can anyone tell me where did I go wrong or did I use the wrong syntax?

What is paste.syntax? Is this really supposed to be paste.pasteSyntax? From what I can see, you do not have a field named syntax in the form group. — R. Richards
– R. Richards, Commented Nov 1, 2017 at 11:36
@R.Richards, nope. Everything in my actual code works fine so that isn't the problem. — Etosticity
– Etosticity, Commented Nov 1, 2017 at 11:59
Try adding #rForm inside the form tag. I think that what you are passing to addPaste isn't quite right (obviously, it is null). — R. Richards
– R. Richards, Commented Nov 1, 2017 at 12:02
@R.Richards, that actually crashed my whole form lol. See: Console Log — Etosticity
– Etosticity, Commented Nov 1, 2017 at 13:36
That was not my intention! :) I was hoping that would get you the reference you needed. — R. Richards
– R. Richards, Commented Nov 1, 2017 at 13:40

AVJT82 · Accepted Answer · 2017-11-04 13:20:11Z

1

You problem is this line in your addPaste:

this.pasteSyntax = paste.syntax;

it should be:

this.pasteSyntax = paste.pasteSyntax;

But as mentioned by Nilandri, you don't need to variable, you can access the value from the form in your template with, or then print the pasteSyntax property when you submit your form with rForm.value as parameter:

addPaste(value) {
  console.log(value.pasteSyntax);
  console.log(this.rForm.get('pasteSyntax').value);
  // or
  console.log(this.rForm.controls.pasteSyntax.value)
}

DEMO

edited Nov 4, 2017 at 13:20

answered Nov 4, 2017 at 11:48

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

9 Comments

Etosticity Over a year ago

I do believe that it is the same thing as console.log(paste) though more specific. Tested your answer, still returned null from the console. Any other ideas?

AVJT82 Over a year ago

Well I just like to use the variables available, instead of having 'unnecessary' variables, but of course you can use it :) The answer I provided should work just fine: stackblitz.com/edit/angular-vcavs7?file=app/app.component.ts

AVJT82 Over a year ago

@EtosticityRammington updated answer, noticed the error when looking closer, but as said, the answer I provided before editing should work tho :)

Etosticity Over a year ago

Actually, your demo works! Code compared with my side and yours, are totally the same. But I just can't work out why isn't it working. Is it possible to communicate somewhere else for this? Thanks! :D

Etosticity Over a year ago

Ah... Hmm alright, thanks for the help anyway, appreciate it! :D

|

Collectives™ on Stack Overflow

Angular Forms not passing data from HTML

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related