@rxap/form-system
Version:
This package provides a set of directives, decorators, mixins, and validators to simplify the creation of dynamic forms in Angular applications. It offers features such as automatic control creation, data source integration, component customization, and h
623 lines (519 loc) • 25.3 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-form-system</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">angular-form-system</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content injectable">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Injectables</li>
<li class="breadcrumb-item" >NoopResolveMethod</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#readme"
class="nav-link"
role="tab" id="readme-tab" data-bs-toggle="tab" data-link="readme">README</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/lib/directives/autocomplete-options-from-method.directive.ts</code>
</p>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#call" >call</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="call"></a>
<span class="name">
<span ><b>call</b></span>
<a href="#call"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>call(undefined: literal type)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="103"
class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:103</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>literal type</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise<ControlOption></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade " id="readme">
<p><h1>Autocomplete Table Select</h1>
<h1>With Rxap form System</h1>
<b>Example :</b><div><pre class="line-numbers"><code class="language-angular2html">
<mat-form-field>
<mat-label>Company</mat-label>
<input type="text"
placeholder="Enter Company Name"
matInput
formControlName="company"
[matAutocomplete]="auto">
<!-- The autocomplete input -->
<mat-autocomplete #auto="matAutocomplete">
<mat-option *rxapAutocompleteOptionsFromMethod="let option; matAutocomplete: auto"
[value]="option.value">{{ option.display }}
</mat-option>
</mat-autocomplete>
<button mat-icon-button rxapInputClearButton matSuffix>
<mat-icon>clear</mat-icon>
</button>
</mat-form-field></code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">@Injectable()
@RxapForm('form')
export class Form {
// ensure the table data source is provided - in root or in the form component
@UseAutocompleteOptionsMethod(SearchCompanyMethod)
// ensure the table data source is provided - in root or in the form component
@UseAutocompleteResolveMethod(GetCompanyMethod)
@UseFormControl()
company!: RxapFromControl<Company>;
}</code></pre></div><p>The DataSource <code>CompanyGuiTableDataSource</code> is used to populate the table in the selection window. Ensure that this DataSource is of the type <code>AbstractTableDataSource</code>.</p>
<p>The Method <code>SearchCompanyMethod</code> is used by the autocomplete control to search for a list of matching selection options. The Method must accept a string as the first argument and return a list of <code>ControlOption</code> objects.</p>
<p>The Method <code>GetCompanyMethod</code> is used to resolve the selected value. The Method must accept a the value of the form control as the first argument and return a <code>ControlOption</code> object.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">export class SearchCompanyMethod implements Method<ControlOptions, { parameters: { search?: string | null } }> { ... }
export class GetCompanyMethod implements Method<ControlOption, { parameters: { value: string } }> { ... }</code></pre></div><h1>Method Parameter Adopter</h1>
<p>By default the following adopter function is used by the <code>@UseAutocompleteOptionsMethod</code> and <code>@UseAutocompleteResolveMethod</code> decorators.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">(parameters) => ({parameters})</code></pre></div><p>To override this default adopter function use the second argument of the decorator.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">@UseAutocompleteOptionsMethod(SearchCompanyMethod, { adapter: { parameter: (parameters) => ({ search: parameters.search }) } })</code></pre></div><blockquote>
<p>The adapter function are called in an injection context, so it is possible to use the <code>inject</code> function</p>
</blockquote>
</p>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
AfterViewInit,
Directive,
inject,
Injectable,
Injector,
INJECTOR,
Input,
isDevMode,
OnDestroy,
ProviderToken,
} from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { ControlOption, ControlOptions } from '@rxap/utilities';
import { distinctUntilChanged, Subscription, tap } from 'rxjs';
import { isUUID } from '@rxap/validator';
import { Method, MethodWithParameters } from '@rxap/pattern';
import { Mixin } from '@rxap/mixin';
import { NgControl } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { isDefined } from '@rxap/rxjs';
import { ExtractControlMixin } from '../mixins/extract-control.mixin';
import { ExtractFormDefinitionMixin } from '../mixins/extract-form-definition.mixin';
import {
ExtractIsValueFunctionMixin,
UseIsValueFunction,
} from '../mixins/extract-is-value-function.mixin';
import { ExtractMethodMixin } from '../mixins/extract-method.mixin';
import { UseMethodConfig } from '../mixins/extract-methods.mixin';
import { UseOptionsMethod } from '../mixins/extract-options-method.mixin';
import {
ExtractResolveMethodMixin,
UseResolveMethod,
} from '../mixins/extract-resolve-method.mixin';
import {
ExtractToDisplayFunctionMixin,
UseToDisplayFunction,
} from '../mixins/extract-to-display-function.mixin';
import { OptionsFromMethodDirective, OptionsFromMethodDirectiveSettings } from './options-from-method.directive';
import { OpenApiRemoteMethodParameter } from '@rxap/open-api/remote-method';
import { controlValueChanges$ } from '@rxap/forms';
export function UseAutocompleteOptionsMethod(
method: ProviderToken<MethodWithParameters<ControlOptions, AutocompleteOptionsFromMethodDirectiveParameters>>,
): any;
export function UseAutocompleteOptionsMethod(
method: ProviderToken<MethodWithParameters<ControlOptions, OpenApiRemoteMethodParameter<AutocompleteOptionsFromMethodDirectiveParameters>>>,
): any;
export function UseAutocompleteOptionsMethod(
method: ProviderToken<MethodWithParameters>,
config: UseMethodConfig<ControlOptions, AutocompleteOptionsFromMethodDirectiveParameters>,
): any;
export function UseAutocompleteOptionsMethod(
method: ProviderToken<MethodWithParameters<ControlOptions, AutocompleteOptionsFromMethodDirectiveParameters | OpenApiRemoteMethodParameter<AutocompleteOptionsFromMethodDirectiveParameters>>>,
config: UseMethodConfig = {},
) {
config.adapter ??= {};
config.adapter.parameter ??= (parameters) => ({parameters});
return UseOptionsMethod(method as any, config);
}
export function UseAutocompleteResolveMethod<Value = unknown>(
method: ProviderToken<MethodWithParameters<ControlOption<Value>, OpenApiRemoteMethodParameter<{ value: string }>>>,
config: UseMethodConfig = {},
) {
config.adapter ??= {};
config.adapter.parameter ??= (parameters) => ({parameters});
return UseResolveMethod(method, config);
}
export function UseAutocompleteIsValueFunction(
isValue: (value: any) => boolean,
): any {
return UseIsValueFunction(isValue);
}
export function UseAutocompleteToDisplayFunction(
toDisplay: (value: any) => string,
): any {
return UseToDisplayFunction(toDisplay);
}
export interface AutocompleteOptionsFromRemoteMethodTemplateContext {
$implicit: ControlOption;
}
export interface AutocompleteOptionsFromMethodDirectiveSettings extends OptionsFromMethodDirectiveSettings {
filteredOptions?: boolean;
}
export interface AutocompleteOptionsFromMethodDirectiveParameters<Value = any> {
search?: Value | null;
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface AutocompleteOptionsFromMethodDirective<Value = any, Parameters extends AutocompleteOptionsFromMethodDirectiveParameters<Value> = AutocompleteOptionsFromMethodDirectiveParameters<Value>>
extends ExtractResolveMethodMixin, ExtractIsValueFunctionMixin, ExtractToDisplayFunctionMixin, AfterViewInit, OnDestroy {
}
@Injectable({ providedIn: 'root' })
export class NoopResolveMethod<Value> implements Method<ControlOption, { value: Value }> {
call({ value } : { value: Value }): Promise<ControlOption> {
return Promise.resolve({ value, display: value + '' });
}
}
@Mixin(ExtractResolveMethodMixin, ExtractIsValueFunctionMixin, ExtractToDisplayFunctionMixin)
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[rxapAutocompleteOptionsFromMethod]',
standalone: true,
})
export class AutocompleteOptionsFromMethodDirective<Value = any, Parameters extends AutocompleteOptionsFromMethodDirectiveParameters<Value> = AutocompleteOptionsFromMethodDirectiveParameters<Value>>
extends OptionsFromMethodDirective<Value, Parameters>
implements AfterViewInit, OnDestroy {
static override ngTemplateContextGuard(
dir: OptionsFromMethodDirective,
ctx: any,
): ctx is AutocompleteOptionsFromRemoteMethodTemplateContext {
return true;
}
@Input('rxapAutocompleteOptionsFromMethodParameters')
public declare parameters?: Parameters;
@Input('rxapAutocompleteOptionsFromMethodResetOnChange')
public declare resetOnChange?: Value;
@Input('rxapAutocompleteOptionsFromMethodMatAutocomplete')
public matAutocomplete?: MatAutocomplete;
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('rxapAutocompleteOptionsFromMethodCall')
public declare method: Method<ControlOptions, Parameters>;
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('rxapAutocompleteOptionsFromMethodResolve')
public resolveMethod?: MethodWithParameters<ControlOption, { value: Value } & Parameters>;
@Input('rxapAutocompleteOptionsFromMethodIsValue')
public isValue?: (value: any) => boolean;
@Input('rxapAutocompleteOptionsFromMethodToDisplay')
public toDisplay?: (value: any) => string;
protected override ngControl: NgControl | null = null;
protected override matFormField: MatFormField | null = null;
protected override injector: Injector = inject(INJECTOR);
protected override settings: AutocompleteOptionsFromMethodDirectiveSettings = {};
/**
* This flag is used to prevent the setValue is called for each refresh
* of the options list. This is needed because the setValue method will
* trigger a new refresh of the options list. This results in an endless
* call stack. This flag is set to true if the setValue method is called
* once.
*/
private isAutocompleteToDisplayTriggered = false;
private _subscription?: Subscription;
public ngOnDestroy() {
this._subscription?.unsubscribe();
}
public override async ngAfterViewInit() {
if (this.matAutocomplete) {
this.settings ??= {};
this.settings.filteredOptions ??= true;
}
await super.ngAfterViewInit();
this.resolveMethod ??= this.extractResolveMethod();
this.isValue ??= this.extractIsValueFunction((value: any) => typeof value === 'string' && isUUID(value));
this.toDisplay ??= this.extractToDisplayFunction((value: any): string => {
if (!value) {
return '';
}
const option = this.findOptionByValue(value);
return option?.display ?? (isDevMode() ? 'to display error' : '...');
});
if (this.matAutocomplete) {
this.matAutocomplete.displayWith = this.toDisplay.bind(this);
}
if (!this.control) {
throw new Error('The control is not yet defined');
}
const value$ = controlValueChanges$(this.control);
this._subscription = value$.pipe(
isDefined(),
// only trigger the load options or resolve value if the value is changed
// this is required because in the resolveValue method the control value is set
// to trigger the toDisplay function in the mat-autocomplete
distinctUntilChanged(),
tap(async value => {
this.setOptions(await this.loadOptions(this.parameters));
if (this.isValue?.(value)) {
this.triggerAutocompleteToDisplay();
}
}),
).subscribe();
}
protected override loadOptions(parameters: Parameters = {} as Parameters): Promise<ControlOptions | null> {
if (!this.control) {
throw new Error('The control is not yet defined');
}
const value = this.control?.value;
const c_parameters = {...parameters};
if (this.isValue?.(value)) {
return this.resolveValue(value, c_parameters);
} else {
c_parameters.search ??= value;
if (!c_parameters.search) {
return Promise.resolve([]);
}
return super.loadOptions(c_parameters);
}
}
protected override renderTemplate() {
super.renderTemplate();
if (this.matAutocomplete && !this.isAutocompleteToDisplayTriggered) {
this.isAutocompleteToDisplayTriggered = true;
this.triggerAutocompleteToDisplay();
}
}
protected async resolveValue(value: Value, parameters: Parameters = {} as Parameters) {
if (!this.resolveMethod) {
if (isDevMode()) {
console.warn('The resolve method is not yet defined');
}
return null;
}
// only resolve the value if the option is not already loaded
if (!this.findOptionByValue(value)) {
const option = await this.resolveMethod!.call({...parameters, value});
if (option.value !== value) {
throw new Error('The resolved value is not the same as the input value');
}
return [ option ];
}
return this.options;
}
private triggerAutocompleteToDisplay() {
// trigger a change detection after the options are rendered
// this is needed to trigger the mat-autocomplete options to display function
this.ngControl?.control?.setValue(this.ngControl?.control?.value);
}
private findOptionByValue(value: Value): ControlOption | null {
return this.options?.find((option: ControlOption) => option.value === value) ?? null;
}
}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'injectable';
var COMPODOC_CURRENT_PAGE_URL = 'NoopResolveMethod.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>