CODEWITHSUNDEEP
angulartypescript
Shah
Shah

Reputation: 565

Angular 7: Display value when click on Radio button

I have some problem with radio button. I need to display value when click on the radio button. Let say, when click on weekly it display "weekly" at "Selection" element. I've tried to make it but it not work. Could you teach me where should I change or add to make it display.

This is my code.

HTML

    <form [formGroup]="form" (ngSubmit)="submit()">

  <label *ngFor="let order of orders">
    <input formControlName="orders" type="radio" name="orders" [value]="order.id" />
    {{order.name}}
  </label>

  <br>
  <label *ngFor="let radiobutton of options">
    <input type="radio" class="justify-right" formControlName="options" name="options" [value]="radiobutton.id">{{radiobutton.name}}
    </label>

   <p>Selection: {{options.name}}</p>
  <button>submit</button>
</form>

And this is my component code

TS

    form: FormGroup;
  orders = [];
  options = []

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: [''],
      options: ['']
    });

    // mimic async orders
    of(this.getOrders()).subscribe(orders => {
      this.orders = orders;
      this.form.controls.orders.patchValue(this.orders[0].id);
    });

    // getOptions
    of(this.getOptions()).subscribe(options => {
      this.options = options;
      this.form.controls.options.patchValue(this.options[0].id);
    })

    // synchronous orders
    // this.orders = this.getOrders();
    // this.form.controls.orders.patchValue(this.orders[0].id);
  }

  getOrders() {
    return [
      { id: 100, name: 'order 1' },
      { id: 200, name: 'order 2' },
      { id: 300, name: 'order 3' },
      { id: 400, name: 'order 4' }
    ];
  }

  getOptions(){
        return[
          {id: 'Once', name: 'Once'},
          {id: 'Daily', name: 'Daily'},
          {id: 'Weekly', name: 'Weekly'},
          {id: 'Interval', name: 'Interval'},
        ]
      }

      ngOnInit(){
        this.options
      }

  submit() {
    console.log(this.form.value);
  }

For reference you can refer here

Hope you all can help..

Thanks in advance

Upvotes: 0

Views: 2555

Answers (4)

nash11
nash11

Reputation: 8660

You can either use the form variable to access the options directly in the HTML or you can use a getter in your component and display that in your HTML.

To display selected value directly using form

<p>Selection: {{form.get('options').value}}</p>

To display selected value using a getter

component

get optionsValue() {
  return this.form.get('options').value;
}

HTML

<p>Selection: {{optionsValue}}</p>

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27353

Since you have a formcontrol assosiated with formGroup you can't access options form control like options.name instead you can use getters

A getter provides easy access to the aliases in the form control instance compared to repeating the form.get('options') method to get each instance.

get Options(){
        return this.form.get('options').value;
 }

Ref:https://angular.io/guide/reactive-forms#step-3-accessing-the-formarray-control

Example:https://stackblitz.com/edit/angular-dynamic-radio-list-pyad5s

Upvotes: 1

mewi
mewi

Reputation: 352

If you'd like to use this value outside of just displaying it, you will want to use ngModel. To do so in your case:

Change your input to

<input [(ngModel)]="selection" type="radio" class="justify-right" formControlName="options" name="options" [value]="radiobutton.id">

And then add this to your typescript file under options

selection: String;

And change your selection print to

Selection: {{selection}}

Now if you want to use this value at any point in your TypeScript functions, simply call it using this.selection

Upvotes: 2

Pallamolla Sai
Pallamolla Sai

Reputation: 2493

You just need to replace one line.

with

<p>Selection: {{options.name}}</p>

below one.

<p>Selection: {{form.controls['options'].value}}</p>

Upvotes: 1

Related Questions