ng-on-rest-create
v1.0.0-alpha.0
Published
create module
Downloads
19
Maintainers
Readme
ng-on-rest-create
This module is an implementation of generic create component for ng-on-rest
First of all you need to install the dependency using yarn
or npm
.
npm install ng-rest-create -S
yarn add ng-rest-create
The package comes with different bundles
- umd
- esm5
- esm2015
Thanks to ng-packagr. So feel free to use what suits you best.
Additionaly, you will find typedoc documentation in docs folder.
Usage
Configuration
First, the module must be imported
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgorCoreModule } from 'ng-on-rest-core';
import { NgorCreateModule } from 'ng-on-rest-create';
import { AppComponent } from './components/app.component';
import { CreatePostComponent } from './components/create-post.component';
import { DeletePostComponent } from './components/delete-post.component';
import { EditPostComponent } from './components/edit-post.component';
import { PostsComponent } from './components/posts.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
PostsComponent,
CreatePostComponent,
DeletePostComponent,
EditPostComponent,
],
entryComponents: [
PostsComponent,
CreatePostComponent,
DeletePostComponent,
EditPostComponent,
],
imports: [
BrowserModule,
NgorCreateModule.forRoot(),
NgorCoreModule.forRoot({
resources: [
{
components: {
create: CreatePostComponent,
delete: DeletePostComponent,
detail: EditPostComponent,
list: PostsComponent,
},
endPoint: 'http://jsonplaceholder.typicode.com',
name: 'posts',
},
],
}),
],
})
export class AppModule { }
Let's see what this code does
Create Component
CreatePostComponent
evolved quite a bit.
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { TNgorFormModel } from 'ng-on-rest-forms';
import { PostClient, PostCreateComponent, PostResource } from '../../../interfaces/components/posts';
@Component({
selector: 'create-post',
template: `
<h4>Create a post</h4>
<div class="row justify-content-center">
<div class="col-6">
<ngor-create-entity (onCreate)="goBack()">
<ngor-create-entity-step [model]="model">
</ngor-create-entity-step>
</ngor-create-entity>
</div>
</div>
`,
})
export class CreatePostComponent implements PostCreateComponent {
public resource: PostResource;
public client: PostClient;
public step: string;
public model: TNgorFormModel = [
{
id: 'title',
label: 'title',
required: true,
type: 'INPUT',
},
{
id: 'body',
label: 'body',
type: 'TEXTAREA',
},
];
private _router: Router;
constructor(router: Router) {
this._router = router;
}
public goBack() {
this._router.navigate(['create/posts']);
}
}
ng-on-rest-create
uses @ng-dynamic-forms to create Dynamic forms. TNgorFormModel
is just a type that wraps its API and make easier create models. You can create models like you do with DynamicFormsCoreModule
. ng-on-rest-create
pass your model as a JSON Form model.
Limitations
You cannot use custom templates for now. We are looking for a solution. But you can make custom form groups (see below).
NgorFormsModule
imports DynamicFormsNGBootstrapUIModule
so you can use it only with ngBootstrap
for now. @ng-dynamic-forms exports a lot of ui libraries connectors but we don't support it yet.
Creation workflow made easy
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { TNgorFormModel } from 'ng-on-rest-forms';
import { PostClient, PostCreateComponent, PostResource } from '../../../interfaces/components/posts';
@Component({
selector: 'create-post',
template: `
<h4>Create a post</h4>
<div class="row justify-content-center">
<div class="col-6">
<ngor-create-entity (onCreate)="goBack()">
<ngor-create-entity-step [model]="detailModel">
</ngor-create-entity-step>
<ngor-create-entity-step [model]="userModel">
</ngor-create-entity-step>
</ngor-create-entity>
</div>
</div>
`,
})
export class CreatePostComponent implements PostCreateComponent {
public resource: PostResource;
public client: PostClient;
public step: string;
public detailModel: TNgorFormModel = [
{
id: 'title',
label: 'Title',
required: true,
type: 'INPUT',
},
{
id: 'body',
label: 'Body',
type: 'TEXTAREA',
},
];
public userModel: TNgorFormModel = [
{
id: 'userId',
label: 'User',
required: true,
type: 'INPUT',
},
];
private _router: Router;
constructor(router: Router) {
this._router = router;
}
public goBack() {
this._router.navigate(['create/posts']);
}
}
This will create a beardcrumb
on top of the form and navigation between the steps.
Custom form group
TODO
i18n
You can provide i18n labels
via ngor-create-entity
&& ngor-create-entity-step
input see INgorCreateLabels
& INgorCreateStepLabels
interfaces for help. These will be translated thanks to ngx-translate. It is quite mandatory for form buttons & step titles.