Угловой 5: получение входного значения формы независимо от того, изменено оно

Question

Как я могу передать onNext() входное значение формы элемента управления с именем "Category1"?Когда форма изменяется, значение передается, но когда пользователь не меняет значение, это не так.Мне нужно, чтобы значение всегда передавалось.Как мне это сделать?

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

Смотрите снимок экрана:

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