Angular Swagger FormField
Angular (2 and above) module with some components to build a model-driven form using the generated classes from the swagger-ts-generator. After you setup and executed the swagger-ts-generator, you can use the generated classes to build model driven forms using this module.
See angular-swagger-form-field-sample for a sample how to use the generated classes and the classes from this package.
Setup
Download the module with npm:
npm install --save angular-swagger-form-field
If you use SystemJS, add the module in systemjs.config.js
:
... map: ... 'angular-swagger-form-field': 'npm:angular-swagger-form-field/bundles' ... packages: ... 'angular-swagger-form-field': defaultExtension: 'js' ...
Add the module to your AppModule:
...;...
ng2-translate
The contents of the generated enum language files can be used in ng2-translate to translate select-options in the UI.
Include ngx-translate in the AppModule:
;;;; // AoT requires an exported function for factories// export function HttpLoaderFactory(http: Http) {// return new TranslateHttpLoader(http);// }......
Configure ng2-translate in the AppComponent:
;...
Model driven form
You can use the generated models to build an Angular (2 and above) model driven form (aka reactive form).
Each model contains a $FormGroup
property. This property can be used in a component to create a model driven form
by feeding it to the FormBuilder:
;...
Now the View can bind to the fields:
Pet
The sf-form-field
is a wrapper component which generates a formfield using a Bootstrap structure and wrappes the elements content in an sf-form-input
component.
The sf-form-input
component adds validation message logic and UI.
For the actual validation a third component named sf-validation-messages
is used.
Tip:
You can choose to implement your own form-field components if the provided bootstrap options don't satisfy your needs.
Just look at the implemented components and roll up your own. You can use the form-control-finder
to find the real input field to attach the validations to.
enums
The generated enums and enum language files can be used to populate a select boxes.
Define the AllEnums in the Component so the View can bind to it (see the enums section above) and use in the View:
{{enum | translate}}
(the tfEnum
pipe converts an enum instance to an array. The translate
pipe translates the enum value to the value from the language file).
ValidationMessages
The validation-messages
class contains the validation messages to use:
/** * The individual validation messages with placeholders. */ private static config =;
You can override a message by calling the setValidationErrorMessage
method in AppComponent:
;...