Looking to place a text-box in col-6 and other elements in the adjacent col-6 for a side-by-side layout.
I attempted using 2 *ngFor iterations successfully, but is it possible to achieve the same with just one iteration?
https://i.sstatic.net/Hdp0r.png Visit this link for more information: https://stackblitz.com/edit/angular-hunqiq
Hey there! Bravo on your journey to achieving what you desire. In order to reach your goal, it is essential to rearrange the list in the component as shown below:
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"]
}
]
Once this step is completed, you will have the ability to utilize an *ngFor loop like so:
<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 trust that these instructions will guide you towards success. Best of luck on your coding journey!
I need assistance with skipping empty InnerText and assigning a default value in my code. Here is the code snippet: if (strip_tags($result[$c]->innertext) == '') { $c++; continue; } Below is the output: https://i.stack. ...
I encountered a peculiar situation while working with Cucumber: Scenario Outline: Protractor and Cucumber Test InValid Given I have already...... When I fill the <number> .... Examples: | number|... | 3 |... |4 |... Moreover, I ...
I am encountering an issue where the normal HTML img tag works perfectly fine inside my Masonry List. However, when I use the Next.js Image Component with a layout of fill, it fails to render anything. Custom Styles: const ImageList = styled('ul&apos ...
When viewing the menu on standard screens, everything looks good. However, on smaller screens, the menu items start to wrap which is fine. The only issue is that the containing div #nav does not automatically enlarge along with it. I would like for the div ...
With the power of Firebase, I created a chatroom using HTML that saves all its data, including usernames and messages, in a real-time Firebase database. The chatroom currently displays sent messages upon manual page reloads or when a new message is sent, ...
I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...
For a recent client project, I utilized basic HTML and CSS. However, the client expressed a desire for Glyphicons to be included in the website menus. Attempting to incorporate Glyphicons with Bootstrap CSS posed challenges as it affected other aspects of ...
Recently, I delved into the world of web development and decided to test my skills by creating a basic webpage with an interactive top navigation bar. Depending on the link clicked, specific HTML elements would be displayed while turning off others using a ...
Currently, I am in the process of using webpack to manage all of my project assets. In my app.js file, I am loading and concatenating my assets with the help of ExtractTextPlugin: import 'foundation-sites/scss/normalize.scss'; import 'foun ...
I am working on implementing a route to a page in Angular for handling incorrect URL addresses. Error Received in Console While there is no error message in my IDE, the console displays the following error: ERROR TypeError: Cannot read property 'name ...
I am wondering if it is possible to retrieve the value of a submit button's id without using JavaScript, as I need to insert these values into a MySql database. Below is the code snippet I have been working on: <form action="messages.php" method= ...
I have an image with 5 hotspots links on it. I want a way to display a 'well done' button once all five spots are clicked. I've searched through StackOverflow, but haven't found a suitable solution yet. Is there a simple conditional met ...
Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...
I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...
Lately, I've been diving into the world of (X)HTML & CSS and have come to understand that HTML is meant for structure while CSS is used for presentation. It makes me wonder if a significant portion of images on websites are more about enhancing p ...
My goal is to dynamically load a part of my website, specifically by using icon classes defined in the interface like this: import { OpaqueToken } from "@angular/core"; import {IAppConfig} from './app.interface' export let APP_CONFIG = new Opaq ...
I'm struggling with aligning a div vertically inside another div in Internet Explorer. Here's my HTML code: <div class="header"> <div id="mainMenu"> <!--Main menu content here--> </div> </div> My s ...
Here is a snippet of my code: <Box p={6}> <Grid container spacing={2}> <Grid item xs={6}> <TimePicker autoOk label={t('checkIn')} value={time1} onChange={handlecheckIn} clearable /> </Grid> < ...
Within my interface, there is a member with a complex type structured like this: export interface Activity { id: string; name: string; segment: Segment; } export interface Segment { id: string; name: string; } Coming from a C# background where ...
From the service, I will be receiving an integer as the selected value and need to send it back as an integer. Please refer to the code in this Plnkr link. <!-- Working --> <div ng-init="selectedvalue = '3'"> <select ng-model= ...