Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
angular-formsbuilder-gen
Advanced tools
Readme
Unlock enhanced productivity in Angular development with our innovative NPM module! Seamlessly generate form classes directly from OpenAPI specifications, ensuring adherence to Angular best practices. Our solution is tailored for Angular 12 and above, offering compatibility and reliability.
Save valuable time and resources by automating the creation of form group objects. Say goodbye to manual labor and tedious form building processes. Our tool empowers developers with a FormBuilder Helper class, effortlessly generating FormBuilder scripts for each model. Experience streamlined development workflows and expedited project delivery with our intuitive solution.
Optimize your Angular development workflow today and elevate your productivity to new heights!
If you want to install "angular-formsbuilder-gen" globally or just on your project
npm install -g ng-openapi-gen
npm install -g angular-formsbuilder-gen
Then If you want to use it first you need to create configuration file in root of your angular app let's call it 'swagger.json' which should contains following object
{
"$schema": "node_modules/ng-openapi-gen/ng-openapi-gen-schema.json",
"input": "https://localhost:44325/swagger/v1/swagger.json",
"output": "./src/app/api",
"ignoreUnusedModels": false,
"modelsPath": "./../api/models",
"formsOutput": "/src/app/forms"
"schemeFile": "E://swagger.json"
}
note this file will be used also for ng-openapi-gen tool Click here to know more about it in section "Configuration file and CLI arguments."
our tool cares only about properties "modelsPath, formsOutput, input"
scheme is loaded from local file instead of url even if url is set
models: path for generated models ng-openapi-gen
formsOutput: where should our tool generated formsbuilder classes
first we need to generated services and models by using ng-openapi-gen
Execute Following Command:
ng-openapi-gen -c swagger.json
Note: Make sure files are generated in "output" path defined in swagger.json
to generate angular you models formsbuilder classes
Execute Following Command:
ng-frmGenerator swagger.json
or you can use
ng-frmGenerator
only because default filename for configuration is "swagger.json"
following example is for simple user information
import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import { FormControl, FormArray, FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
import { IFormBuilder } from './IFormBuilder';
import { CustomerDto, UserAddressDto } from './../api/models';
import { UserAddressDtoFormBuilder } from './UserAddressDto';
import { oneOfValidator, guidValidator } from './CustomeValidators';
@Injectable({ providedIn: 'root' })
export class CustomerDtoFormBuilder implements IFormBuilder<CustomerDto> {
DatePipe: DatePipe = null as any;
DateFormat: string = 'yyyy-MM-dd';
form: FormGroup = null as any;
constructor(private fb: FormBuilder
, private UserAddressDtoFormBuilderSrvc: UserAddressDtoFormBuilder
) {
this.DatePipe = new DatePipe('en-US');
}
updateCulture(culture: string = 'en-US') {
this.DatePipe = new DatePipe(culture);
}
resetForm() {
this.form.reset();
}
buildForm(model: CustomerDto | null = null) {
this.form = this.fb.group({
userName: [ '' , Validators.compose([ Validators.required, Validators.minLength(1) ]) ],
password: [ '' , Validators.compose([ Validators.required ]) ],
addresses: [ this.UserAddressDtoFormBuilderSrvc.buildForm() ],
});
if (model != null) {
this.form.patchValue({ ...model });
}
return this.form;
}
get userNameCtrl(): FormControl {
return this.form.get('userName') as FormControl;
}
get userNameValueChanges$() {
return this.userNameCtrl?.valueChanges;
}
get passwordCtrl(): FormControl {
return this.form.get('password') as FormControl;
}
get passwordValueChanges$() {
return this.passwordCtrl?.valueChanges;
}
addressesArray(): FormArray {
return this.form.controls['addresses'] as FormArray;
}
addressesControls(): AbstractControl<any, any>[] {
return this.addressesArray().controls;
}
deleteAddressesByIndex(index: number): void {
this.addressesArray().removeAt(index);
}
addNewAddresses(model: UserAddressDtoFormBuilder | null = null): FormGroup<any> {
let frm = this.UserAddressDtoFormBuilderSrvc.buildForm(model);
this.addressesArray().push(frm);
return frm;
}
addNewaddresses(model: UserAddressDto | null = null): FormGroup<any> {
let frm = this.UserAddressDtoFormBuilderSrvc.buildForm(model);
this.addressesArray().push(frm);
return frm;
}
}
---
FormsHelpers.ts This utility file provides convenient methods for enhancing form handling in TypeScript applications.
findName: This function aids in working with interfaces by converting their props into string names compatible with the code.
newId(): Generates a new unique identifier using Guid, ensuring each ID is distinct.
emptyId: Returns the empty Guid '00000000-0000-0000-0000-000000000000', useful for initializing identifiers.
removeControls: Simplifies the process of removing controls from a form group, reducing potential issues such as compiler errors that may arise from changing field names. Usage example:
removeControls<userModel>([
a => a.age,
a => a.address
], this.frm);
markAsRequired<LoginModel>([
a => a.password,
a => a.userName
], this.frm);
markAllAsRequired(this.frm)
CustomeValidator.ts:
New Validator Add CompareFields: used in cases that both controls values must be qual like password confirmation
markAllAsRequiredExcept<PasswordChangeModel>(this.frm,[
a => a.passwordChangeToken,
a => a.userId
]);
in this version I've made a refactor in core behaviour of generating the files in order to support basic validations defined in swagger.json document.
fix some issues which causes missing props in some models.
fix issue of build related to custome validator guidValidator
Github repository moved to bitbucket
FAQs
Auto Generate Forms Builder Files For Angualr 6+ Base On Swagger Generated Scheme
We found that angular-formsbuilder-gen demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.