@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
1,155 lines (1,008 loc) • 57 kB
HTML
<!doctype 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 directive">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Directives</li>
<li class="breadcrumb-item" >AutocompleteOptionsFromMethodDirective</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>
<p class="comment">
<h3>Extends</h3>
</p>
<p class="comment">
<code><a href="../classes/ExtractResolveMethodMixin.html" target="_self" >ExtractResolveMethodMixin</a></code>
<code><a href="../classes/ExtractIsValueFunctionMixin.html" target="_self" >ExtractIsValueFunctionMixin</a></code>
<code><a href="../classes/ExtractToDisplayFunctionMixin.html" target="_self" >ExtractToDisplayFunctionMixin</a></code>
<code>AfterViewInit</code>
<code>OnDestroy</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>AfterViewInit</code>
<code>OnDestroy</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">Selector</td>
<td class="col-md-9"><code>[rxapAutocompleteOptionsFromMethod]</code></td>
</tr>
<tr>
<td class="col-md-3">Standalone</td>
<td class="col-md-9"><code>true</code></td>
</tr>
</tbody>
</table>
</section>
<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>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#injector" >injector</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#matFormField" >matFormField</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#ngControl" >ngControl</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#settings" >settings</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#loadOptions" >loadOptions</a>
</li>
<li>
<span class="modifier">Static</span>
<span class="modifier"></span>
<a href="#ngTemplateContextGuard" >ngTemplateContextGuard</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier"></span>
<a href="#renderTemplate" >renderTemplate</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier">Async</span>
<a href="#resolveValue" >resolveValue</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#extractResolveMethod" >extractResolveMethod</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#rxapAutocompleteOptionsFromMethodCall" >rxapAutocompleteOptionsFromMethodCall</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodIsValue" >rxapAutocompleteOptionsFromMethodIsValue</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodMatAutocomplete" >rxapAutocompleteOptionsFromMethodMatAutocomplete</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodParameters" >rxapAutocompleteOptionsFromMethodParameters</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodResetOnChange" >rxapAutocompleteOptionsFromMethodResetOnChange</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodResolve" >rxapAutocompleteOptionsFromMethodResolve</a>
</li>
<li>
<a href="#rxapAutocompleteOptionsFromMethodToDisplay" >rxapAutocompleteOptionsFromMethodToDisplay</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodCall"></a>
<b>rxapAutocompleteOptionsFromMethodCall</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Method<ControlOptions | Parameters></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:134</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodIsValue"></a>
<b>rxapAutocompleteOptionsFromMethodIsValue</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:140</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodMatAutocomplete"></a>
<b>rxapAutocompleteOptionsFromMethodMatAutocomplete</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>MatAutocomplete</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:131</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodParameters"></a>
<b>rxapAutocompleteOptionsFromMethodParameters</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Parameters</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="127" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:127</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodResetOnChange"></a>
<b>rxapAutocompleteOptionsFromMethodResetOnChange</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Value</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:129</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodResolve"></a>
<b>rxapAutocompleteOptionsFromMethodResolve</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>MethodWithParameters<ControlOption | ></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:137</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapAutocompleteOptionsFromMethodToDisplay"></a>
<b>rxapAutocompleteOptionsFromMethodToDisplay</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:143</a></div>
</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="loadOptions"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>loadOptions</b></span>
<a href="#loadOptions"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>loadOptions(parameters: Parameters)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="201"
class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:201</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>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>parameters</td>
<td>
<code>Parameters</code>
</td>
<td>
No
</td>
<td>
<code>{} as Parameters</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Promise<ControlOptions | null></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngTemplateContextGuard"></a>
<span class="name">
<span class="modifier">Static</span>
<span class="modifier"></span>
<span ><b>ngTemplateContextGuard</b></span>
<a href="#ngTemplateContextGuard"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>ngTemplateContextGuard(dir: <a href="../directives/OptionsFromMethodDirective.html" target="_self">OptionsFromMethodDirective</a>, ctx: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="119"
class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:119</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>dir</td>
<td>
<code><a href="../directives/OptionsFromMethodDirective.html" target="_self" >OptionsFromMethodDirective</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>ctx</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../interfaces/AutocompleteOptionsFromRemoteMethodTemplateContext.html" target="_self" >AutocompleteOptionsFromRemoteMethodTemplateContext</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="renderTemplate"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>renderTemplate</b></span>
<a href="#renderTemplate"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>renderTemplate()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="218"
class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:218</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="resolveValue"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier">Async</span>
<span ><b>resolveValue</b></span>
<a href="#resolveValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>resolveValue(value: Value, parameters: Parameters)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="226"
class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:226</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>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>Value</code>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>parameters</td>
<td>
<code>Parameters</code>
</td>
<td>
No
</td>
<td>
<code>{} as Parameters</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>unknown</code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="extractResolveMethod"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>extractResolveMethod</b></span>
<a href="#extractResolveMethod"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>extractResolveMethod(control: RxapFormControl, formDefinition)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Inherited from <code><a href="../classes/ExtractResolveMethodMixin.html" target="_self" >ExtractResolveMethodMixin</a></code>
</div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <code><a href="../classes/ExtractResolveMethodMixin.html#source" target="_self" >ExtractResolveMethodMixin:39</a></code>
</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>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>control</td>
<td>
<code>RxapFormControl</code>
</td>
<td>
No
</td>
<td>
<code>this.extractControl()</code>
</td>
</tr>
<tr>
<td>formDefinition</td>
<td>
</td>
<td>
No
</td>
<td>
<code>this.extractFormDefinition(control)</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="injector"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>injector</b></span>
<a href="#injector"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Injector</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>inject(INJECTOR)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:147</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="matFormField"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>matFormField</b></span>
<a href="#matFormField"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>MatFormField | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:146</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngControl"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>ngControl</b></span>
<a href="#ngControl"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>NgControl | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:145</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="settings"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier"></span>
<span ><b>settings</b></span>
<a href="#settings"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/AutocompleteOptionsFromMethodDirectiveSettings.html" target="_self" >AutocompleteOptionsFromMethodDirectiveSettings</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{}</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/lib/directives/autocomplete-options-from-method.directive.ts:148</a></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 need