Return all object values within selected selected property for Angular reactive form

Question

I have a simple dynamic radio button, in my example 3 are created from returning data.

When a radio value is selected it populates my reactive form with that value, "yes", "no" or "maybe". In theses objects there are other properties that I would like to be sent back as part of the form.

As below I return section, but also want to return sectionCode of the matched section.

Before radio selection is changed my form shows all properties correctly, but obviously I can only pass back one value, so as soon as I do the other object items are lost.

https://stackblitz.com/edit/angular-r4g6uv?file=src%2Fapp%2Fpersonal%2Fpersonal.component.ts

section:[
        {
          section: "yes",
          sectionCode: "1"
        },
        {
          section: "no",
          sectionCode: "2"
        },
        {
          section: "maybe",
          sectionCode: "3"
        }
      ]

component.html

<div formGroupName="radioButtons" class="form-group col-6 pl-0 pt-3">
    <h2 class="mb-2">radioButtons</h2>
    <label for="intel-form-submitter" appRequiredLabel>select</label><br />
    <div class="form-check-inline" *ngFor="let item of personal.radioButtons.section">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input value="{{item.section}}" id="{{item.section}}" type="radio" formControlName="section"/>
            <span class="checkmark"></span>
        </label>
    </div>
</div>

component.ts

  createEntry(formBuilder: FormBuilder) {
    return this.formBuilder.group({
      title: this.personal.title,
      creationDate: this.personal.creationDate,
      radioButtons: this.formBuilder.group({
       section: this.personal.radioButtons.section,
      })
    });
  }

You can find the object by property. this.section.find(element => element.section == this.personal.radioButtons.section); and use this in return. — Mahbub Moon
– Mahbub Moon, Commented Nov 14, 2019 at 10:11
do you add this to the formbuilder entry? if you can show example that would be good. — Tom Rudge
– Tom Rudge, Commented Nov 14, 2019 at 10:42

Kewin Fernando · Accepted Answer · 2019-11-14 11:46:40Z

hope this helps you.

Bind the object instead of one value in the object. In Component.html

[value]="item"

Component.html

<form [formGroup]="form" novalidate>
    <div formGroupName="radioButtons" novalidate>

        <div class="form-check-inline" *ngFor="let item of section">
            <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input **[value]="item"** id="{{item.section}}" type="radio" formControlName="section"/>
            <span class="checkmark"></span>
        </label>
        </div>

    </div>

  <button type="button" (click)="save()" >Save</button>

</form>

{{form.value|json}}

Component.ts

xport class AppComponent implements OnInit {
  section = [
    {
      section: "yes",
      sectionCode: "1"
    },
    {
      section: "no",
      sectionCode: "2"
    },
    {
      section: "maybe",
      sectionCode: "3"
    }
  ];

  selectedSection: any;
  form: FormGroup;

  constructor(public formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.createEntry();
  }

  createEntry() {
    return this.formBuilder.group({
      radioButtons: this.formBuilder.group({
        section: this.section[0]
      })
    });
  }

  save(){
    console.log(this.form)
  }
}

Find project in - https://stackblitz.com/edit/k-react-form-radio-test-5bixbv

MonkeyScript · Accepted Answer · 2019-11-14 10:17:33Z

0

You can bind the object itself instead of just section name.

<input [value]="item" id="{{item.section}}" type="radio"/>

Demo : https://stackblitz.com/edit/angular-h1mwhe

edited Nov 14, 2019 at 10:17

answered Nov 14, 2019 at 10:03

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

3 Comments

Tom Rudge Over a year ago

Thanks, but this is not a reactive form. Not sure how this is implemented in my scenario. A reactive form does not use ngModel

MonkeyScript Over a year ago

@TomRudge You don't need to use ngModel. I just used it to provide easy example. Just use the above code in your program and it will work just fine.

MonkeyScript Over a year ago

@TomRudge Here is the working demo with your code. https://stackblitz.com/edit/angular-m9sbtf

Collectives™ on Stack Overflow

Return all object values within selected selected property for Angular reactive form

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related