Angular 4 format string into html form options

Question

In angular 4 I have a component where I am getting the data for form fields which user has made saved. So basically I am getting data like this

data = [
    {type: "option", label: "Country", options: "India, Sri Lanka"},
    {type: "option", label: "Size", options: "Large, Small, Extra Large"},
    {type: "radio", label: "Gender", options: "Male, Female"}
]

Now I want to use those data in the html and build a form. So when type is option then it would be a select option type with those options. If it the type will be radio then it will show radio field in the form with those options(Male, Female)

I have made my component like this

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-registration-checkout',
  templateUrl: './registration-checkout.component.html',
  styleUrls: ['./registration-checkout.component.css']
})

export class RegistrationCheckoutComponent implements OnInit {

id: any;

constructor(
    private http: HttpClient,
    protected checkOutService: CheckoutService,
    ) {
   }

   ngOnInit() {
    this.id = localStorage.getItem('id');
    this.checkOutService.getExtraFields(this.id).subscribe(     response => {
    this.fields = response['fields'];
    console.log(this.fields); // shows data in array object
    },
    err => {
      console.log(err);
    });
   }
}

In HTML I have made my code like this

<div *ngFor = "let form of fields; let i = index">
    {{form | json}}
    <div *ngIf="form.type=='option'">
        Show Select Option
        {{form.options}}

        <select>
            <option></option>
        </select>
    </div>
    <div *ngIf="form.type=='radio'">
        show Radio Option
        <input type="radio" name="">
    </div>

Here I am bit confused how to make the options for select into loop. I mean the options are now in string with comma. So how can I make that so it will look like

<select name="country">
            <option value="India">India</option>
            <option value="Sri Lanka">Sri Lanka</option>
        </select>

user4676340 · Accepted Answer · 2018-03-21 14:49:29Z

1

Try something like this

<div *ngFor="let form of fields; let i = index">
  <div *ngIf="form.type === 'option'">
    <select>
      <option *ngFor="let option of form.options.split(',')" [value]="option">{{ option }}</option>
    </select>
  </div>
  <div *ngIf="form.type === 'radio'">
    <ng-container *ngFor="let option of form.options.split(',')">
      <input type="radio" [name]="option"> {{ option }}
  </ng-container>
  </div>

answered Mar 21, 2018 at 14:49

user4676340

Sign up to request clarification or add additional context in comments.

4 Comments

Narm Over a year ago

Gosh, you're quick. I was just typing that same response up (and you included StackBlitz)! Beat me to it, again!

user4676340 Over a year ago

Thanks, I'll try to keep it down if you want ;)

NewUser Over a year ago

can you tell me how to make validation and the functionality where when a user makes submit it should show the submitted values at a time just like reactive form?

user4676340 Over a year ago

I can't, I only use reactive forms. If you want help on validation with forms, here is the documentation ! angular.io/guide/form-validation#template-driven-validation

Collectives™ on Stack Overflow

Angular 4 format string into html form options

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related