Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5: Obtaining form input value whether changed or not

Tags:

forms

angular5

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:

enter image description here

like image 345
Michael Niño Avatar asked Jun 03 '18 21:06

Michael Niño


1 Answers

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;
  }
}
like image 60
Jean Marois Avatar answered Sep 28 '22 05:09

Jean Marois