Introduction
In this article, we are going to see how to add controls in angular applications dynamically like textbox, dropdown, radio button or date picker, etc. And followed the form validations in angular.
First, we need to set up an angular application and follow the steps below.
Add code to app.module.ts codes. In this code, we imported FormsModule & ReactiveFormsModule.
import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
AppRoutingModule
} from './app-routing.module';
import {
AppComponent
} from './app.component';
import {
FormsModule,
ReactiveFormsModule
} from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Next, we are going to add control selection, type, and values, placeholder, and label whatever we need. The selection control is dropdown is the control type. Please refer to the screenshots below.
Here I have created in app.interface.ts file. We’re taking properties of the control in IFormField and IDropdown. And then declared Form group and IFormFields from app.component.ts file.
app.interface.ts
export interface IFormField {
label: string;
f_Name: string;
f_Type: string;
f_Value: string;
placeholder: string;
values: IDropdown[]; // To fill dropdown values
}
export interface IDropdown {
displayValue: string;
internalValue: string;
}
export interface IUser {
userName: string;
}
Here create the service file app.service.ts file in our root directory. And set Dropdown field value.
import {
Injectable
} from '@angular/core';
import {
IDropdown
} from './app.interface';
@Injectable({
providedIn: 'root',
})
export class AppService {
getList() {
let dropDown: IDropdown[] = [];
let _Test_1 = < IDropdown > {
displayValue: 'Test 1',
internalValue: 'T1',
};
dropDown.push(_Test_1);
let _Test_2 = < IDropdown > {
displayValue: 'Test 2',
internalValue: 'T2',
};
dropDown.push(_Test_2);
return dropDown;
}
}
In app.component.ts file, controls are added dynamically. We can also set it in UI form. We apply the different validation types with different controls(textbox,dropdown,radio,date picker...etc...).
Please follow the app.component.ts file for
- Adding controls to onSubmitControl function ,
- Validate all types of controls to formValidation function, in email or password field we can set pattern validations as well, here I have added for email pattern validations.
App.component.ts
import {
Component,
OnInit
} from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import {
IFormField,
IDropdown,
IUser
} from './app.interface';
import {
AppService
} from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'sample-form';
sampleform: FormGroup;
controlform: FormGroup;
lstForm: IFormField[] = [];
outputStr: string = '';
typename: any;
ValueType: any;
constructor(private formBuilder: FormBuilder, private appService: AppService) {}
ngOnInit(): void {
this.sampleform = this.formBuilder.group({});
this.controlform = this.formBuilder.group({
typename: ['', Validators.required],
valueType: ['0', Validators.required],
labelname: ['', Validators.required],
});
}
onSubmitControl() {
if (this.controlform.value.valueType == "text") {
let _un = < IFormField > {
label: this.controlform.value.labelname,
f_Name: this.controlform.value.typename,
f_Type: this.controlform.value.valueType,
f_Value: this.controlform.value.typename,
};
this.lstForm.push(_un)
}
if (this.controlform.value.valueType == "dropdown") {
let stateList = this.appService.getList(); // Get test list from service
let _ddlStateList = < IFormField > {
label: this.controlform.value.labelname,
f_Name: this.controlform.value.typename,
f_Type: this.controlform.value.valueType == "dropdown" ? 'select' : '',
f_Value: '0',
values: stateList,
};
this.lstForm.push(_ddlStateList);
}
if (this.controlform.value.valueType == "radio") {
let _radio = < IFormField > {
label: this.controlform.value.labelname,
f_Name: this.controlform.value.typename,
f_Type: this.controlform.value.valueType,
f_Value: this.controlform.value.typename,
};
this.lstForm.push(_radio);
}
if (this.controlform.value.valueType == "datepicker") {
let _radio = < IFormField > {
label: this.controlform.value.labelname,
f_Name: this.controlform.value.typename,
f_Type: this.controlform.value.valueType == "datepicker" ? 'date' : '',
f_Value: this.controlform.value.typename,
};
this.lstForm.push(_radio);
}
this.formValidation();
}
formValidation() {
const group: any = {};
for (var field of this.lstForm) {
if (field.f_Type == 'text') {
group[field.f_Name] = new FormControl(field.f_Value || '', [
Validators.required,
]);
} else if (field.f_Name.toLowerCase().indexOf('email') > -1) {
group[field.f_Name] = new FormControl(field.f_Value || '', [
Validators.required,
Validators.pattern('[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,6}$'),
]);
} else if (field.f_Type == 'select') {
group[field.f_Name] = new FormControl(field.f_Value || '', Validators.required);
} else if (field.f_Type == 'radio') {
group[field.f_Name] = new FormControl(false, null);
} else if (field.f_Type == 'date') {
group[field.f_Name] = new FormControl(field.f_Value || '', [
Validators.required,
]);
}
}
this.sampleform = new FormGroup(group);
}
onSubmit() {
this.formValidation();
if (this.sampleform.valid) {
console.log(this.lstForm);
}
}
}
Join the conversation! Your thoughts help the community grow.