packages/data/src/lib/resource-form/resource-form.component.ts
ResourceFormComponent can be used to edit or create any SDK Resource. The form needs the api and the relation name. If you pass a resource the form will edit that resource. The default config comes from resource-config.ts.
Example:
```js
```html
The above snippets will render a form to create a datamanager. After the datamanager has been created, the form will switch to edit mode. If you directly want to edit a given resource, just pass it through the resource input:
```html
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ec-resource-form |
| template | |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(loaderService: LoaderService, notificationService: NotificationsService, formService: FormService, symbol: SymbolService, resourceService: ResourceService, cdr: ChangeDetectorRef)
|
|||||||||||||||||||||
|
Injects services and calls super constructor.
Parameters :
|
| api | |
Type : Core
|
|
|
The API Connector that possesses the resource list, see https://entrecode.github.io/ec.sdk/#api-connectors |
|
| loader | |
Type : LoaderComponent
|
|
|
The loader that should be shown while the list is loaded. |
|
| relation | |
Type : string
|
|
|
The name of the resource. If given, the generic ListResource loading will be used (api.resourceList) |
|
| config | |
Type : FormConfig<T>
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:47
|
|
|
You can also use a FormConfig/ItemConfig as input (with defined fields property) |
|
| debounceTime | |
Default value : 200
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:67
|
|
|
debounce time till changed event/callback will be fired |
|
| empty | |
Type : boolean
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:53
|
|
|
If set to true, the form will be rendered empty, to be referenced from the outside. |
|
| item | |
Type : Item<T>
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:49
|
|
|
You can also use an Item as input |
|
| lazy | |
Type : boolean
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:69
|
|
|
If true, the form will only init once. On new changes, the form values will be patched (see patchValue) |
|
| loader | |
Type : LoaderComponent
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:59
|
|
|
The loader that should be used. |
|
| silent | |
Type : boolean
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:57
|
|
|
If true, no notifications will be emitted. |
|
| submitButton | |
Type : boolean
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:55
|
|
|
If set to false, the form will be rendered without a submit button. Default: true |
|
| value | |
Type : T
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:51
|
|
|
If you pass an object to value, the form will generate an item from it. |
|
| changed | |
Type : EventEmitter<FormComponent<T>>
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:65
|
|
|
Emits when a new instance of Form is present |
|
| ready | |
Type : EventEmitter<FormComponent<T>>
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:63
|
|
|
Emits when the form has been initialized. |
|
| submitted | |
Type : EventEmitter<Form<T>>
|
|
|
Inherited from
FormComponent
|
|
|
Defined in
FormComponent:61
|
|
|
Emits when the form is submitted. The form can only be submitted if all Validators succeeded. |
|
| Protected init | ||||||||||||
init(item: Item
|
||||||||||||
|
Inits the form with optional item and config params. If an item is present, the form will edit it.
Parameters :
Returns :
void
|
| initConfig |
initConfig()
|
|
Merges current config default config and config input
Returns :
void
|
| isEditing |
isEditing()
|
|
Yields true if the current edited resiource is already existing in the backend.
Returns :
any
|
| ngOnChanges | ||||
ngOnChanges(changes?)
|
||||
|
Reinits config
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inits config
Returns :
void
|
| Public addField | |||||||||
addField(property: string, config: FieldConfigProperty)
|
|||||||||
|
Inherited from
FormComponent
|
|||||||||
|
Defined in
FormComponent:167
|
|||||||||
|
Adds a new field with the given config to the form
Parameters :
Returns :
void
|
| clear |
clear()
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:175
|
|
Clears the current value
Returns :
void
|
| create | ||||||||
create(config: ItemConfig
|
||||||||
|
Inherited from
FormComponent
|
||||||||
|
Defined in
FormComponent:180
|
||||||||
|
Parameters :
Returns :
void
|
| edit | ||||||
edit(item: Item
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:186
|
||||||
|
edits a given Item instance by using its config and body.
Parameters :
Returns :
void
|
| editValue | ||||||||||||
editValue(value: T, config)
|
||||||||||||
|
Inherited from
FormComponent
|
||||||||||||
|
Defined in
FormComponent:191
|
||||||||||||
|
edits a given value by creating an item and calling edit.
Parameters :
Returns :
void
|
| getColumns | ||||||
getColumns(field: Field)
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:96
|
||||||
|
Returns the column class for data-col, based on configured columns
Parameters :
Returns :
string
|
| getErrors | ||||||||||||
getErrors(formComponent: FormComponent
|
||||||||||||
|
Inherited from
FormComponent
|
||||||||||||
|
Defined in
FormComponent:262
|
||||||||||||
|
Returns an Error containing all field validator errors as subErrors.
Parameters :
Returns :
Error
|
| getValue | ||||||
getValue(property?: string)
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:254
|
||||||
|
Returns the current value of the form control group. When passing a property, it directly returns the property value.
Parameters :
Returns :
any
|
| Protected init | ||||||||||||
init(item: Item
|
||||||||||||
|
Inherited from
FormComponent
|
||||||||||||
|
Defined in
FormComponent:115
|
||||||||||||
|
Inits the form (if ready)
Parameters :
Returns :
void
|
| Protected initGroup |
initGroup()
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:127
|
|
Initializes the FormGroup which is generated from the current form instance. Sets valueChanges listener
Returns :
void
|
| ngOnChanges | ||||
ngOnChanges(changes?)
|
||||
|
Inherited from
FormComponent
|
||||
|
Defined in
FormComponent:86
|
||||
|
On change, the form instance is (re)created by combining all inputs. If no item is given, an empty form is created using the config. You can also pass just an item to use its config and body.
Parameters :
Returns :
void
|
| Public patchObjectField | ||||||||
patchObjectField(property, path, value)
|
||||||||
|
Inherited from
FormComponent
|
||||||||
|
Defined in
FormComponent:161
|
||||||||
|
Parameters :
Returns :
void
|
| patchValue | ||||||
patchValue(value)
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:100
|
||||||
|
Parameters :
Returns :
void
|
| showLabel | ||||||
showLabel(field, form)
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:238
|
||||||
|
Determindes if the given field's label should be shown based on hideFormLabel+hideFormLabelIfEmpty flags
Parameters :
Returns :
boolean
|
| showSubmitButton |
showSubmitButton()
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:233
|
|
Decides if the submit button should be rendered or not based on config
Returns :
boolean
|
| showTitle | ||||||
showTitle(field, form)
|
||||||
|
Inherited from
FormComponent
|
||||||
|
Defined in
FormComponent:246
|
||||||
|
Determines if the field labels should always show the field property (EDITOR-431)
Parameters :
Returns :
boolean
|
| submit |
submit()
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:197
|
|
Method that is invoked when the form is submitted.
Returns :
any
|
| Public formService |
Type : FormService
|
| resourceConfig |
Type : ResourceConfig
|
| Public resourceService |
Type : ResourceService
|
| Public config |
Type : FormConfig<T>
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:42
|
|
The current form config |
| defaultLoader |
Type : LoaderComponent
|
Decorators :
@ViewChild(LoaderComponent)
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:71
|
|
The forms default loader. it is used when no loader is passed via the loader input |
| Public form |
Type : Form<T>
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:38
|
|
The instance of Form that is used. |
| Public formService |
Type : FormService
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:78
|
| Public group |
Type : FormGroup
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:40
|
|
The current (angular) form group. |
| notifications |
Type : Notification[]
|
Default value : []
|
|
Inherited from
FormComponent
|
|
Defined in
FormComponent:44
|
|
Recent Error notification |
import { Component, OnInit, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import {
FormComponent,
LoaderService,
NotificationsService,
FormService,
LoaderComponent,
formTemplate,
} from '@ec.components/ui';
import Core from 'ec.sdk/lib/Core';
import { OnChanges } from '@angular/core';
import { Item, FormConfig } from '@ec.components/core';
import Resource from 'ec.sdk/lib/resources/Resource';
import { ResourceForm } from './resource-form';
import { SymbolService } from '@ec.components/ui';
import { ResourceService } from '../resource-config/resource.service';
import { ResourceConfig } from '../resource-config/resource-config.service';
/** ResourceFormComponent can be used to edit or create any [SDK Resource](https://entrecode.github.io/ec.sdk/#resource).
* The form needs the [api](https://entrecode.github.io/ec.sdk/#core) and the relation name.
* If you pass a resource the form will edit that resource.
* The default config comes from resource-config.ts.
*
* Example:
*
* ```js
* this.datamanager = new DataManager('live'); // api connector (children of Core)
* ```
*
* ```html
* <ec-resource-form api="datamanager" relation="dataManager"></ec-resource-form>
* ```
*
* The above snippets will render a form to create a datamanager. After the datamanager has been created, the form will switch to edit mode.
* If you directly want to edit a given resource, just pass it through the resource input:
*
* ```html
* <ec-resource-form api="datamanager" relation="dataManager" [resource]="myDatamanager"></ec-resource-form>
* ```
* ```js
* this.sdk.datamanager.dataManager(shortID).then(dm=>this.myDatamanager = dm);
* ```
*
*/
@Component({
selector: 'ec-resource-form',
template: formTemplate,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ResourceFormComponent extends FormComponent<Resource> implements OnInit, OnChanges {
resourceConfig: ResourceConfig;
/** The API Connector that possesses the resource list, see https://entrecode.github.io/ec.sdk/#api-connectors */
@Input() api: Core; // sdk api connector
/** The name of the resource. If given, the generic ListResource loading will be used (api.resourceList) */
@Input() relation: string;
/** The loader that should be shown while the list is loaded. */
@Input() loader: LoaderComponent;
/** Injects services and calls super constructor. */
constructor(
protected loaderService: LoaderService,
protected notificationService: NotificationsService,
public formService: FormService,
protected symbol: SymbolService,
public resourceService: ResourceService,
protected cdr: ChangeDetectorRef,
) {
super(loaderService, notificationService, formService, symbol, cdr);
this.resourceConfig = this.resourceService.config;
}
/** Inits config */
ngOnInit() {
this.initConfig();
}
/** Reinits config */
ngOnChanges(changes?) {
this.initConfig();
}
/** Merges current config default config and config input */
initConfig() {
this.config = Object.assign(
{},
this.config || {},
this.resourceConfig.get(this.relation) || {},
this.configInput || {},
);
this.init();
}
/** Inits the form with optional item and config params. If an item is present, the form will edit it. */
protected init(item: Item<Resource> = this.item, config: FormConfig<Resource> = this.config) {
if (!this.relation || (!this.api && !this.value)) {
return;
}
if (this.value) {
// if value is set, create item from value only
this.form = new ResourceForm(this.value, config, this.api, this.relation, this.resourceService);
} else if (item instanceof Item) {
this.form = new ResourceForm(
item.getBody(),
item.getConfig() || config || {},
this.api,
this.relation,
this.resourceService,
);
} else if (config) {
this.form = new ResourceForm(null, config, this.api, this.relation, this.resourceService);
}
this.initGroup();
}
/** Yields true if the current edited resiource is already existing in the backend. */
isEditing() {
if (!this.form) {
return;
}
const entry = this.form.getBody();
return entry && entry.save;
}
}