forms - 角 5 : Obtaining form input value whether changed or not

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