swagular
v1.0.51
Published
Make your swagger specification source of true by generate client api includes form group controllers.
Downloads
15
Readme
Swagular
Make your swagger specification source of true by generate client api includes form group controllers.
Motivation
To prevent rewrite schema again (in angular forms), or even more - prevent write the ui.
For example, we can just do :
model = this.swagularService.loginFormModel({ fields: [{ key: 'email' }, { key: 'password', type: 'password' }] });
And then using it in our component:
<swagular-form class="container" [model]="model" (submit)="login()"></swagular-form>
The full example is here
Get started
This package is using OpenAPI 3 code generator to generate the client api, so first run npm i ng-openapi-gen -D
Install the package by running npm i swagular
Add script that will generate the client api code to your package.json:
"gen": "ng-openapi-gen --input [path to your api doc] --templates node_modules/swagular/templates",
Now you can just run npm run gen
, it will generate the code under src/app/api folder.
import the modules to your angular modules -
ApiModule.forRoot({ rootUrl: [path to your api] }),
SwagularModule
Add the service to your component dependencies.
constructor(private service: SomeService) {}
Using generated form group
if your route have body params, you can see the relevant form group in the generated service.
for example - login route -
formGroup = this.service.loginFormGroup();
using swagular form component
you can use swagular form component instead of building the form on your own -
- install angular material
ng add @angular/material
- import
SwagularComponentModule
to ng module. - declare the form model
model: FormModel<LoginFormGroupType> = {
formGroup: this.service.loginFormGroup(),
formTitle: 'Login Form',
formSaveButtonTitle: 'Login',
fields: [{ key: 'email' }, { key: 'password', type: 'password' }]
};
- bind the model to swagular-form component
<swagular-form class="container" [model]="model" (submit)="login()"></swagular-form>