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:
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With