Angular 5: Obtaining form input value whether changed or not

Question

How can I pass to onNext() the form's input value of the control named "Category1"? When the form is changed the value is passed but when the user doesn't change the value isn't. I need the value always passed. How do I do this?

<div class="app-form container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="button-left float-left">
                <button (click)="onPrevious('tab-empinfo')">Previous</button>
            </div>
        </div>
        <div class="col-6">
            <div class="button-right float-right">
                <button 
                (click)="onNext('tab-selection', {
                         form: 'category', 
                         data: {category: formCategory.value['Category1']}})">
                Next
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h4>Category</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <form #formCategory="ngForm">
                <div class="form-group" *ngFor="let input of categorySelection; let i = index">
                    <choice *ngIf="input.type == 'choice'" name="Category{{ i + 1 }}" ngModel
                            [multiple]="input.multiple" [question]="input.question" [answers]="input.answers"></choice>
                </div>
            </form>
        </div>
    </div>
</div>
<pre>
    {{ formCategory.value | json }}
</pre>

Please see screen shot:

Answer 1

Try using an input tag instead of choice. Set the [(ngmodel)] to a property of your container, e.g. category1 and use the same name for each input. It does not need to match the property name, I arbitrarily set it to be category1. Set category1 property to the default value. The component's category1 property value will initialize one of the radio button to be set. Use the category1 property in your on click method parameter.

See https://stackblitz.com/edit/angular-yq5w2y?file=app/app.component.ts for a working example.

<div class="app-form container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="button-left float-left">
                <button (click)="onPrevious('tab-empinfo')">Previous</button>
            </div>
        </div>
        <div class="col-6">
            <div class="button-right float-right">
                <button 
                (click)="onNext('tab-selection', {
                         form: 'category', 
                         data: {category: category1}})">
                Next
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h4>Category</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
                <div class="form-group" *ngFor="let input of categorySelection">
                  <input  type="radio" *ngIf="input.type == 'radio'" [(ngModel)]="category1" name="category1" value="{{input.answer}}" > {{input.answer}}
                </div>
        </div>
    </div>
</div>
----
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  categorySelection = [{type: 'radio', answer: "who"}, {type: 'radio', answer: "what"}];
  category1 = "who";
  result;
  onPrevious(data: string) {
    this.result = data;
  }
  onNext(x, data: any): any {
    this.result = data;
  }
}