Angular 5:获取表单输入值是否更改

Question

如何传递onNext()名为"Category1"的控件的表单输入值？更改表单时,将传递该值,但是当用户未更改该值时则不会.我需要永远传递的价值.我该怎么做呢？

<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>

请看屏幕截图:

Answer 1

尝试使用input标签而不是choice. 将 设为[(ngmodel)]容器的属性，例如category1并为每个输入使用相同的名称。它不需要匹配属性名称，我随意设置为category1. 将属性设置category1为默认值。组件的category1 属性值将初始化要设置的单选按钮之一。category1在单击方法参数中使用该属性。

请参阅https://stackblitz.com/edit/angular-yq5w2y?file=app/app.component.ts了解工作示例。

<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;
  }
}