CODEWITHSUNDEEP
htmlcssangularbootstrap-4col
Bravo
Bravo

Reputation: 121

is there anyway to divide row in different col with only one ngfor iteration?

I would like to put a text-box in col-6 and other types in other col-6 so they can be next to each other.

I have tried using 2 *ngFor iterations and it is displaying which I want but can we do with only one iteration?

enter image description here https://stackblitz.com/edit/angular-hunqiq

Upvotes: 0

Views: 173

Answers (1)

Oussail
Oussail

Reputation: 2288

Hi Bravo to achieve what you want you need to reorder you list in the component like this : 

form_template = [
  {
    "type":"textBox",
    "label":"Name",
  },
  {
    "type":"number",
    "label":"Age"
  },
  {
    "type":"textBox",
    "label":"Name2",
  },
  {
    "type":"number",
    "label":"Age2"
  },
  {
    "type":"textBox",
    "label":"Name3",
  },
  {
    "type":"number",
    "label":"Age3"
  },
  {
    "type":"textBox",
    "label":"Name4",
  },
  {
    "type":"number",
    "label":"Age4"
  },
  {
    "type":"select",
    "label":"favorite book",
    "options":["Jane Eyre","Pride and Prejudice","Wuthering Heights"]
  }
]

Then you will be able to use one *ngFor like this : 

<div class="container-fluid">
    <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
        <div class="row">
                <ng-container *ngFor="let form_elem of form_template">
                  <div class="col-6">
                    <ng-container [ngSwitch]="form_elem.type">
                        <div class="col-md-6 mt-4 form-group">
                            <ng-container *ngSwitchCase="'textBox'" class="">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <input class="form-control col-sm-6" type="text" formControlName="{{form_elem.label}}" />
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'number'">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <input type="number" class="col-sm-6 form-control" formControlName="{{form_elem.label}}" />
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <select class="custom-select  col-sm-6" formControlName="{{form_elem.label}}">
                                        <option *ngFor="let opt of form_elem.options">
                                            {{opt}}
                                        </option>
                                    </select>
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="form-group row">
                                    <div class="col-sm-10">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck1">
                                            <label class="form-check-label" for="gridCheck1">
                                                Example checkbox
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="optradio">Option 1
                                    </label>
                                </div>
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="optradio">Option 2
                                    </label>
                                </div>
                            </ng-container>
                        </div>
                    </ng-container>
                  </div>
            </ng-container>
        </div>
        <input class="mt-2 btn btn-primary" type="submit" value="save" />
    </form>
</div>

I hope this helps. Good Luck!

Upvotes: 1

Related Questions