Hello Guyz! How Are You? Today in this blog series I am going to show you how to create a dynamic selection with angular forms. so let’s get started.
When we deal with certain HTML web forms, we need to first enter a form and data for the user to select or choose. Usually, this data is uploaded to an asynchronous source as an API request. In this blog series, I will show you how to set the input values for the HTML selection input to a questionable data source. so Let’s get started.
Dynamic Select with Angular Forms
For our example, we will now create a simple select input that will iterate over a list of orders for a user to choose like the select dropdown below.
</select>
First, we are going to create our HTML form and select using the Reactive Forms API. To use the Reactive Forms API we need to import the ReactiveFormsModule into our application module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Next, we need to create our form. To do this, we will use the FormBuilder service which provides a convenient way to create forms.
import { Component } from '@angular/core';
import {
FormBuilder,
FormGroup,
FormArray,
FormControl,
ValidatorFn
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
orders: ['']
});
}
submit() {
console.log(this.form.value);
}
}
The form builder creates a FormGroup instance. A form group contains one to many FormControls or individual user inputs. Our single input in this form will be our orders select input.
For now, we are going to hard code our data into our component we will use to create our select dropdown.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: FormGroup;
orders = [];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
orders: ['']
});
this.orders = this.getOrders();
}
getOrders() {
return [
{ id: '1', name: 'order 1' },
{ id: '2', name: 'order 2' },
{ id: '3', name: 'order 3' },
{ id: '4', name: 'order 4' }
];
}
submit() { ... }
}
We will loop over our orders data to build the select options in the HTML template.
<form [formGroup]="form" (ngSubmit)="submit()">
<label for="orders">Order</label>
<select formControlName="orders" id="orders">
<option *ngFor="let order of orders; let i = index" [value]="orders[i].id">
{{orders[i].name}}
</option>
</select>
<button>submit</button>
</form>
For each order in our data set, we create an option for the select. For each select, we bind the order id like the option value. One thing to note whenever you bind data to a select option the value will always be converted to a string.
Now that we have built our select from data dynamically let’s update our code to handle updating the select from asynchronous data. We usually get data from an API request of some kind. In our example, we will simulate an API request using an Observable to emit our data.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { of } from 'rxjs';
// Appfinz Technologies // web designing world //
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: FormGroup;
orders = [];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
orders: ['']
});
// async orders
of(this.getOrders()).subscribe(orders => {
this.orders = orders;
});
}
getOrders() {
return [
{ id: '1', name: 'order 1' },
{ id: '2', name: 'order 2' },
{ id: '3', name: 'order 3' },
{ id: '4', name: 'order 4' }
];
}
submit() { ... }
}
Using the RxJS of() operator, we can convert our data to by async similar to if we requested the data via Angular’s HTTP Service. We can subscribe to the async data and assign it to our order’s property.
We will also update the selection to get an initial default value once our async data will load. We can do this by using the patchValue method on our form control.
of(this.getOrders()).subscribe(orders => {
this.orders = orders;
this.form.controls.orders.patchValue(this.orders[0].id);
});
Check This Also
Ecommerce Rest API in Laravel 6 Ecommerce Rest API in Laravel 6 Top 6 Leading PHP Frameworks For Web Development