I am working on a form that has multiple fields and I need to retrieve the data once it is submitted.
This is the code in component.html :
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku</h2>
<form #f="ngForm"
(ngSubmit)="onSubmit(f.value)"
class="ui form">
<div class="field">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
</div>
<div class="field">
<label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Languages: French/English: </label>
<select class="form-control" name="note" id="select1" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
...
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
And here is the code in component.ts :
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-post-history',
templateUrl: './post-history.component.html',
styleUrls: ['./post-history.component.css']
})
export class PostHistoryComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
onSubmit(form: any): void {
console.log('You have submitted the following values:', form);
}
}
When checking the console log, it only shows the text input and one select value being captured!