I am facing an issue with transferring input data from HTML's <select> element to Angular Forms.
Let's take a look at my code first.
File Name: 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>
File Name: 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 Information:
@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 someone please guide me on where I made a mistake or used the wrong syntax?