@rxap/forms
Version:
This package provides a set of tools and directives to simplify working with Angular forms, including reactive forms, custom validators, and form directives for handling loading, submitting, and error states. It offers decorators for defining forms and co
2,613 lines • 104 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-forms</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-forms</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" >FormDirective</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="#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/form.directive.ts</code>
</p>
<p class="comment">
<h3>Extends</h3>
</p>
<p class="comment">
<code>FormGroupDirective</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnInit</code>
<code>OnChanges</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">Providers</td>
<td class="col-md-9">
<code>
{
provide: ControlContainer, useExisting: forwardRef(() => FormDirective),
}
{
provide: RXAP_FORM_SUBMIT_METHOD, useValue: null,
}
{
provide: RXAP_FORM_LOAD_METHOD, useValue: null,
}
{
provide: RXAP_FORM_LOAD_FAILED_METHOD, useValue: null,
}
{
provide: RXAP_FORM_LOAD_SUCCESSFUL_METHOD, useValue: null,
}
{
provide: RXAP_FORM_SUBMIT_FAILED_METHOD, useValue: null,
}
{
provide: RXAP_FORM_SUBMIT_SUCCESSFUL_METHOD, useValue: null,
}
{
provide: RXAP_FORM_DEFINITION_BUILDER, useValue: null,
}
</code>
</td>
</tr>
<tr>
<td class="col-md-3">Selector</td>
<td class="col-md-9"><code>form[rxapForm]:not([formGroup]):not([ngForm]),rxap-form,form[rxapForm]</code></td>
</tr>
<tr>
<td class="col-md-3">Standalone</td>
<td class="col-md-9"><code>true</code></td>
</tr>
<tr>
<td class="col-md-3">exportAs</td>
<td class="col-md-9"><code>rxapForm</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>
<a href="#_formDefinition" >_formDefinition</a>
</li>
<li>
<span class="modifier"></span>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#cdr" >cdr</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#context" >context</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#form" >form</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#loaded$" >loaded$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#loading$" >loading$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#loadingError$" >loadingError$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#submitError$" >submitError$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#submitting$" >submitting$</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>
<a href="#getSubmitValue" >getSubmitValue</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#loadFailed" >loadFailed</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#loadInitialState" >loadInitialState</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#loadSuccessful" >loadSuccessful</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#onSubmit" >onSubmit</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#submit" >submit</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#submitFailed" >submitFailed</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#submitSuccessful" >submitSuccessful</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="#initial" >initial</a>
</li>
<li>
<a href="#loadFailedMethod" >loadFailedMethod</a>
</li>
<li>
<a href="#loadMethod" >loadMethod</a>
</li>
<li>
<a href="#loadSuccessfulMethod" >loadSuccessfulMethod</a>
</li>
<li>
<a href="#rxapForm" >rxapForm</a>
</li>
<li>
<a href="#submitFailedMethod" >submitFailedMethod</a>
</li>
<li>
<a href="#submitMethod" >submitMethod</a>
</li>
<li>
<a href="#submitSuccessfulMethod" >submitSuccessfulMethod</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#invalidSubmit" >invalidSubmit</a>
</li>
<li>
<a href="#rxapSubmit" >rxapSubmit</a>
</li>
<li>
<a href="#submitSuccessful" >submitSuccessful</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostBindings</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#class.rxap-loaded" >class.rxap-loaded</a>
</li>
<li>
<a href="#class.rxap-loading" >class.rxap-loading</a>
</li>
<li>
<a href="#class.rxap-loading-error" >class.rxap-loading-error</a>
</li>
<li>
<a href="#class.rxap-submit-error" >class.rxap-submit-error</a>
</li>
<li>
<a href="#class.rxap-submitting" >class.rxap-submitting</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#submitting" >submitting</a>
</li>
<li>
<a href="#submitError" >submitError</a>
</li>
<li>
<a href="#loading" >loading</a>
</li>
<li>
<a href="#loaded" >loaded</a>
</li>
<li>
<a href="#loadingError" >loadingError</a>
</li>
<li>
<a href="#useFormDefinition" >useFormDefinition</a>
</li>
<li>
<a href="#formDefinition" >formDefinition</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(cdr: ChangeDetectorRef, formDefinition: <a href="../interfaces/FormDefinition.html" target="_self">FormDefinition | null</a>, submitMethod: <a href="../interfaces/FormSubmitMethod.html" target="_self">FormSubmitMethod<any> | null</a>, loadMethod: <a href="../interfaces/FormLoadMethod.html" target="_self">FormLoadMethod | null</a>, loadFailedMethod: <a href="../interfaces/FormLoadFailedMethod.html" target="_self">FormLoadFailedMethod | null</a>, loadSuccessfulMethod: <a href="../interfaces/FormLoadSuccessfulMethod.html" target="_self">FormLoadSuccessfulMethod | null</a>, submitFailedMethod: <a href="../interfaces/FormSubmitFailedMethod.html" target="_self">FormSubmitFailedMethod | null</a>, submitSuccessfulMethod: <a href="../interfaces/FormSubmitSuccessfulMethod.html" target="_self">FormSubmitSuccessfulMethod | null</a>, formDefinitionBuilder: <a href="../classes/RxapFormBuilder.html" target="_self">RxapFormBuilder | null</a>, loadingIndicatorService: LoadingIndicatorService | null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/lib/directives/form.directive.ts:203</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>cdr</td>
<td>
<code>ChangeDetectorRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>formDefinition</td>
<td>
<code><a href="../interfaces/FormDefinition.html" target="_self" >FormDefinition | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>submitMethod</td>
<td>
<code><a href="../interfaces/FormSubmitMethod.html" target="_self" >FormSubmitMethod<any> | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>loadMethod</td>
<td>
<code><a href="../interfaces/FormLoadMethod.html" target="_self" >FormLoadMethod | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>loadFailedMethod</td>
<td>
<code><a href="../interfaces/FormLoadFailedMethod.html" target="_self" >FormLoadFailedMethod | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>loadSuccessfulMethod</td>
<td>
<code><a href="../interfaces/FormLoadSuccessfulMethod.html" target="_self" >FormLoadSuccessfulMethod | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>submitFailedMethod</td>
<td>
<code><a href="../interfaces/FormSubmitFailedMethod.html" target="_self" >FormSubmitFailedMethod | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>submitSuccessfulMethod</td>
<td>
<code><a href="../interfaces/FormSubmitSuccessfulMethod.html" target="_self" >FormSubmitSuccessfulMethod | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>formDefinitionBuilder</td>
<td>
<code><a href="../classes/RxapFormBuilder.html" target="_self" >RxapFormBuilder | null</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>loadingIndicatorService</td>
<td>
<code>LoadingIndicatorService | null</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</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="initial"></a>
<b>initial</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>T</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/lib/directives/form.directive.ts:119</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadFailedMethod"></a>
<b>loadFailedMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormLoadFailedMethod.html" target="_self" >FormLoadFailedMethod | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="192" class="link-to-prism">src/lib/directives/form.directive.ts:192</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadMethod"></a>
<b>loadMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormLoadMethod.html" target="_self" >FormLoadMethod | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/lib/directives/form.directive.ts:189</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadSuccessfulMethod"></a>
<b>loadSuccessfulMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormLoadSuccessfulMethod.html" target="_self" >FormLoadSuccessfulMethod | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/lib/directives/form.directive.ts:195</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapForm"></a>
<b>rxapForm</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormDefinition.html" target="_self" >FormDefinition | string</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/lib/directives/form.directive.ts:166</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitFailedMethod"></a>
<b>submitFailedMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormSubmitFailedMethod.html" target="_self" >FormSubmitFailedMethod | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/lib/directives/form.directive.ts:198</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitMethod"></a>
<b>submitMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormSubmitMethod.html" target="_self" >FormSubmitMethod<any> | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="186" class="link-to-prism">src/lib/directives/form.directive.ts:186</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitSuccessfulMethod"></a>
<b>submitSuccessfulMethod</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormSubmitSuccessfulMethod.html" target="_self" >FormSubmitSuccessfulMethod | null</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/lib/directives/form.directive.ts:201</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-outputs">
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="invalidSubmit"></a>
<b>invalidSubmit</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</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/form.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="rxapSubmit"></a>
<b>rxapSubmit</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</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/form.directive.ts:131</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits when the submit method is executed without errors. The result of the
submit method is passed as event object.</p>
<p>If no submit method is defined then emit after the submit button
is clicked.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitSuccessful"></a>
<b>submitSuccessful</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/lib/directives/form.directive.ts:138</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.rxap-loaded"></a>
<span class="name">
<span ><b>class.rxap-loaded</b></span>
<a href="#class.rxap-loaded"><span class="icon ion-ios-link"></span></a>
</span>
</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/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/lib/directives/form.directive.ts:156</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.rxap-loading"></a>
<span class="name">
<span ><b>class.rxap-loading</b></span>
<a href="#class.rxap-loading"><span class="icon ion-ios-link"></span></a>
</span>
</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/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/lib/directives/form.directive.ts:151</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.rxap-loading-error"></a>
<span class="name">
<span ><b>class.rxap-loading-error</b></span>
<a href="#class.rxap-loading-error"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Error | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/lib/directives/form.directive.ts:161</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.rxap-submit-error"></a>
<span class="name">
<span ><b>class.rxap-submit-error</b></span>
<a href="#class.rxap-submit-error"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Error | 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/form.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="class.rxap-submitting"></a>
<span class="name">
<span ><b>class.rxap-submitting</b></span>
<a href="#class.rxap-submitting"><span class="icon ion-ios-link"></span></a>
</span>
</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/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/lib/directives/form.directive.ts:141</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="getSubmitValue"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>getSubmitValue</b></span>
<a href="#getSubmitValue"><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>getSubmitValue()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="474"
class="link-to-prism">src/lib/directives/form.directive.ts:474</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>T</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadFailed"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>loadFailed</b></span>
<a href="#loadFailed"><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>loadFailed(error: Error)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="464"
class="link-to-prism">src/lib/directives/form.directive.ts:464</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>error</td>
<td>
<code>Error</code>
</td>
<td>
No
</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" >void</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="loadInitialState"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>loadInitialState</b></span>
<a href="#loadInitialState"><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>loadInitialState(form: <a href="../classes/RxapFormGroup.html" target="_self">RxapFormGroup</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="404"
class="link-to-prism">src/lib/directives/form.directive.ts:404</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>form</td>
<td>
<code><a href="../classes/RxapFormGroup.html" target="_self" >RxapFormGroup</a></code>
</td>
<td>
No
</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" >void</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="loadSuccessful"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>loadSuccessful</b></span>
<a href="#loadSuccessful"><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>loadSuccessful(value: <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="454"
class="link-to-prism">src/lib/directives/form.directive.ts:454</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>value</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="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</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="onSubmit"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>onSubmit</b></span>
<a href="#onSubmit"><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>onSubmit($event: Event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="322"
class="link-to-prism">src/lib/directives/form.directive.ts:322</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>$event</td>
<td>
<code>Event</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</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="submit"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>submit</b></span>
<a href="#submit"><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>submit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="488"
class="link-to-prism">src/lib/directives/form.directive.ts:488</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="submitFailed"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>submitFailed</b></span>
<a href="#submitFailed"><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>submitFailed(error: Error)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="534"
class="link-to-prism">src/lib/directives/form.directive.ts:534</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>error</td>
<td>
<code>Error</code>
</td>
<td>
No
</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" >void</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="submitSuccessful"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>submitSuccessful</b></span>
<a href="#submitSuccessful"><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>submitSuccessful(value: <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="547"
class="link-to-prism">src/lib/directives/form.directive.ts:547</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>value</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="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</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="_formDefinition"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_formDefinition</b></span>
<a href="#_formDefinition"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/FormDefinition.html" target="_self" >FormDefinition<T></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/lib/directives/form.directive.ts:183</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="cdr"></a>
<span class="name">
<span class="modifier"></span>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>cdr</b></span>
<a href="#cdr"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>ChangeDetectorRef</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@Inject(ChangeDetectorRef)<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/lib/directives/form.directive.ts:206</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="context"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>context</b></span>
<a href="#context"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>input<Record<string, unknown>>({})</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/lib/directives/form.directive.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="form"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>form</b></span>
<a href="#form"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/RxapFormGroup.html" target="_self" >RxapFormGroup<T></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/lib/directives/form.directive.ts:116</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loaded$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>loaded$</b></span>
<a href="#loaded$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new ToggleSubject()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="180" class="link-to-prism">src/lib/directives/form.directive.ts:180</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loading$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>loading$</b></span>
<a href="#loading$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new ToggleSubject()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/lib/directives/form.directive.ts:179</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadingError$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>loadingError$</b></span>
<a href="#loadingError$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject<Error | null>(null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/lib/directives/form.directive.ts:181</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitError$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>submitError$</b></span>
<a href="#submitError$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject<Error | null>(null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/lib/directives/form.directive.ts:178</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitting$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>submitting$</b></span>
<a href="#submitting$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new ToggleSubject()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/lib/directives/form.directive.ts:177</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitting"></a>
<span class="name"><b>submitting</b><a href="#submitting"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>submitting()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/lib/directives/form.directive.ts:141</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submitError"></a>
<span class="name"><b>submitError</b><a href="#submitError"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>submitError()</code></span>
</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/form.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="loading"></a>
<span class="name"><b>loading</b><a href="#loading"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>loading()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/lib/directives/form.directive.ts:151</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loaded"></a>
<span class="name"><b>loaded</b><a href="#loaded"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>loaded()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/lib/directives/form.directive.ts:156</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="loadingError"></a>
<span class="name"><b>loadingError</b><a href="#loadingError"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>loadingError()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/lib/directives/form.directive.ts:161</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="useFormDefinition"></a>
<span class="name"><b>useFormDefinition</b><a href="#useFormDefinition"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>useFormDefinition(value: <a href="../interfaces/FormDefinition.html" target="_self">FormDefinition<T> | string</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/lib/directives/form.directive.ts:166</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>value</td>
<td>
<code><a href="../interfaces/FormDefinition.html" target="_self" >FormDefinition<T> | string</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<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="formDefinition"></a>
<span class="name"><b>formDefinition</b><a href="#formDefinition"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>formDefinition()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/lib/directives/form.directive.ts:173</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
ChangeDetectorRef,
Directive,
EventEmitter,
forwardRef,
HostBinding,
Inject,
input,
Input,
isDevMode,
OnChanges,
OnDestroy,
OnInit,
Optional,
Output,
SimpleChanges,
SkipSelf,
} from '@angular/core';
import {
ControlContainer,
FormGroupDirective,
} from '@angular/forms';
import { ToggleSubject } from '@rxap/rxjs';
import { LoadingIndicatorService } from '@rxap/services';
import {
clone,
isObject,
isPromise,
} from '@rxap/utilities';
import {
BehaviorSubject,
Subscription,
} from 'rxjs';
import {
debounceTime,
filter,
tap,
} from 'rxjs/operators';
import { RxapFormBuilder } from '../form-builder';
import { RxapFormGroup } from '../form-group';
import { FormDefinition } from '../model';
import {
FormLoadFailedMethod,
FormLoadMethod,
FormLoadSuccessfulMethod,
FormSubmitFailedMethod,
FormSubmitMethod,
FormSubmitSuccessfulMethod,
} from './models';
import {
RXAP_FORM_DEFINITION,
RXAP_FORM_DEFINITION_BUILDER,
RXAP_FORM_LOAD_FAILED_METHOD,
RXAP_FORM_LOAD_METHOD,
RXAP_FORM_LOAD_SUCCESSFUL_METHOD,
RXAP_FORM_SUBMIT_FAILED_METHOD,
RXAP_FORM_SUBMIT_METHOD,
RXAP_FORM_SUBMIT_SUCCESSFUL_METHOD,
} from './tokens';
@Directive({
selector: 'form[rxapForm]:not([formGroup]):not([ngForm]),rxap-form,form[rxapForm]',
providers: [
{
provide: ControlContainer,
// ignore coverage
useExisting: forwardRef(() => FormDirective),
},
// region form provider clear
// form provider that are directly associated with the current form
// are cleared to prevent that inner forms can access this providers
// Example: The parent form has a submit method provider and the inner should
// not have a submit method provider. If the parent submit method provider is
// not cleared then the inner form uses the parent submit method provider on
// submit
{
provide: RXAP_FORM_SUBMIT_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_LOAD_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_LOAD_FAILED_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_LOAD_SUCCESSFUL_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_SUBMIT_FAILED_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_SUBMIT_SUCCESSFUL_METHOD,
useValue: null,
},
{
provide: RXAP_FORM_DEFINITION_BUILDER,
useValue: null,
},
// endregion
],
host: { '(reset)': 'onReset()' },
// eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
outputs: [ 'ngSubmit' ],
exportAs: 'rxapForm',
standalone: true,
})
export class FormDirective<T = any>
extends FormGroupDirective
implements OnInit, OnChanges, OnDestroy {
public override form!: RxapFormGroup<T>;
@Input()
public initial?: T;
public readonly context = input<Record<string, unknown>>({});
/**
* Emits when the submit method is executed without errors. The result of the
* submit method is passed as event object.
*
* If no submit method is defined then emit after the submit button
* is clicked.
*/
@Output()
public rxapSubmit = new EventEmitter();
@Output()
public invalidSubmit = new EventEmitter<Record<string, any>>();
// eslint-disable-next-line @angular-eslint/no-output-rename
@Output('submitSuccessful')
public submitSuccessful$ = new EventEmitter();
@HostBinding('class.rxap-submitting')
public get submitting(): boolean {
return this.submitting$.value;
}
@HostBinding('class.rxap-submit-error')
public get submitError(): Error | null {
return this.submitError$.value;
}
@HostBinding('class.rxap-loading')
public get loading(): boolean {
return this.loading$.value;
}
@HostBinding('class.rxap-loaded')
public get loaded(): boolean {
return this.loaded$.value;
}
@HostBinding('class.rxap-loading-error')
public get loadingError(): Error | null {
return this.loadingError$.value;
}
@Input('rxapForm')
public set useFormDefinition(value: FormDefinition<T> | '') {
if (value) {
this._formDefinition = value as any;
this.form = value.rxapFormGroup;
}
}
public get formDefinition(): FormDefinition<T> {
return this._formDefinition;
}
public readonly submitting$ = new ToggleSubject();
public readonly submitError$ = new BehaviorSubject<Error | null>(null);
public readonly loading$ = new ToggleSubject();
public readonly loaded$ = new ToggleSubject();
public readonly loadingError$ = new BehaviorSubject<Error | null>(null);
protected _formDefinition!: FormDefinition<T>;
@Input()
public submitMethod: FormSubmitMethod<any> | null = null;
@Input()
public loadMethod: FormLoadMethod | null = null;
@Input()
public loadFailedMethod: FormLoadFailedMethod | null = null;
@Input()
public loadSuccessfulMethod: FormLoadSuccessfulMethod | null = null;
@Input()
public submitFailedMethod: FormSubmitFailedMethod | null = null;
@Input()
public submitSuccessfulMethod: FormSubmitSuccessfulMethod | null = null;
private _autoSubmitSubscription = new Subscription();
constructor(
@Inject(ChangeDetectorRef) public readonly cdr: ChangeDetectorRef,
@Optional()
@Inject(RXAP_FORM_DEFINITION)
formDefinition: FormDefinition | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_SUBMIT_METHOD)
submitMethod: FormSubmitMethod<any> | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_LOAD_METHOD)
loadMethod: FormLoadMethod | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_LOAD_FAILED_METHOD)
loadFailedMethod: FormLoadFailedMethod | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_LOAD_SUCCESSFUL_METHOD)
loadSuccessfulMethod: FormLoadSuccessfulMethod | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_SUBMIT_FAILED_METHOD)
submitFailedMethod: FormSubmitFailedMethod | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_SUBMIT_SUCCESSFUL_METHOD)
submitSuccessfulMethod: FormSubmitSuccessfulMethod | null = null,
// skip self, bc the token is set to null
@SkipSelf()
@Optional()
@Inject(RXAP_FORM_DEFINITION_BUILDER)
protected readonly formDefinitionBuilder: RxapFormBuilder | null = null,
@Optional()
@Inject(LoadingIndicatorService)
protected readonly loadingIndicatorService: LoadingIndicatorService | null = null,
) {
super([], []);
this.submitMethod = submitMethod ?? this.submitMethod;
this.loadMethod = loadMethod ?? this.loadMethod;
this.loadFailedMethod = loadFailedMethod ?? this.loadFailedMethod;
this.loadSuccessfulMethod = loadSuccessfulMethod ?? this.loadSuccessfulMethod;
this.submitFailedMethod = submitFailedMethod ?? this.submitFailedMethod;
this.submitSuccessfulMethod = submitSuccessfulMethod ?? this.submitSuccessfulMethod;
if (!formDefinition && formDefinitionBuilder) {
formDefinition = formDefinitionBuilder.build<FormDefinition>();
}
if (formDefinition) {
this._formDefinition = formDefinition;
this.form = formDefinition.rxapFormGroup;
}
this.loadingIndicatorService?.attachLoading(this.loading$);
this.loadingIndicatorService?.attachLoading(this.submitting$);
}
public override ngOnChanges(changes: SimpleChanges) {
super.ngOnChanges(changes);
const formChange = changes['form'];
if (formChange && !formChange.firstChange) {
this.loadInitialState(formChange.currentValue);
}
}
public ngOnInit() {
if (!this._formDefinition) {
// TODO : replace with rxap error
throw new Error('The form definition instance is not defined');
}
if (!this.form) {
// TODO : replace with rxap error
throw new Error('The form instance is not defined');
}
this.loadInitialState(this.form);
function HasNgOnInitMethod(obj: any): obj is OnInit {
return obj && typeof obj.ngOnInit === 'function';
}
if (HasNgOnInitMethod(this._formDefinition)) {
this._formDefinition.ngOnInit();
}
if (this._formDefinition.rxapMetadata.autoSubmit) {
const debounce =
typeof this._formDefinition.rxapMetadata.autoSubmit === 'number'
? this._formDefinition.rxapMetadata.autoSubmit
: 5000;
this._autoSubmitSubscription = this
.form
.valueChanges
.pipe(
debounceTime(debounce),
filter(() => this.form.valid),
tap((value) => {
if (isDevMode()) {
console.debug(
`Auto submit form '${ this._formDefinition.rxapMetadata.id }'`,
value,
);
}
},
),
tap(() => this.submit()),
)
.subscribe();
}
}
public override onSubmit($event: Event): boolean {
$event.preventDefault();
super.onSubmit($event);
if (this.form.valid) {
this.submit();
} else {
// eslint-disable-next-line no-inner-declarations
function reduceErrors(control: any, errors: Record<string, any> = {}): Record<string, any> {
if (control.invalid) {
if (control.controls) {
if (Array.isArray(control.controls)) {
const errorList = [];
for (const item of control.controls) {
errorList.push(reduceErrors(item));
}
errors[control.controlId] = errorList;
} else {
const innerErrors = {};
for (const child of Object.values(control.controls)) {
reduceErrors(child, innerErrors);
}
errors[control.controlId] = innerErrors;
}
} else {
if (control.errors) {
errors[control.controlId] = control.errors;
}
}
}
return errors;
}
if (isDevMode()) {
console.log(
'Form submit is not valid for: ' + this.form.controlId,
this.form.errors,
);
// eslint-disable-next-line no-inner-declarations
function printErrorControls(control: any) {
if (!control.valid) {
console.group(control.controlId);
if (control.controls) {
if (Array.isArray(control.controls)) {
for (let i = 0; i < control.controls.length; i++) {
const child = control.controls[i];
if (!child.valid) {
console.group(`index: ${ i }`);
printErrorControls(child);
console.groupEnd();
}
}
} else {
for (const child of Object.values(control.controls)) {
printErrorControls(child);
}
}
} else {
if (control.errors) {
for (const [ key, value ] of Object.entries(control.errors)) {
console.group(key);
console.log(value);
console.groupEnd();
}
}
console.log('value: ', control.value);
}
console.groupEnd();
}
}
printErrorControls(this.form);
}
this.invalidSubmit.emit(reduceErrors(this.form));
}
return false;
}
protected loadInitialState(form: RxapFormGroup): void {
if (this.initial) {
if (isDevMode()) {
console.log('use the value from input initial');
}
form.patchValue(this.initial);
} else {
if (this.loadMethod) {
this.loading$.enable();
try {
const resultOrPromise = this.loadMethod.call();
if (isPromise(resultOrPromise)) {
resultOrPromise
.then((value) => {
form.patchValue(value);
this.loaded$.enable();
this.loadSuccessful(value);
})
.catch((error) => {
this.loadingError$.next(error);
this.loadFailed(error);
})
.finally(() => {
this.loading$.disable();
this.cdr.detectChanges();
});
} else if (isObject(resultOrPromise)) {
form.patchValue(resultOrPromise);
this.loaded$.enable();
this.loadSuccessful(resultOrPromise);
this.loading$.disable();
}
} catch (error: any) {
this.loaded$.disable();
this.loadingError$.next(error);
this.loadFailed(error);
this.loading$.disable();
}
} else {
if (isDevMode()) {
console.warn(
'The form loading method is not defined for: ' + this.form.controlId,
);
}
this.loaded$.enable();
}
}
}
protected loadSuccessful(value: any) {
if (this.loadSuccessfulMethod) {
this.loadSuccessfulMethod.call(value);
} else if (isDevMode()) {
console.warn(
'The load successful is not defined for: ' + this.form.controlId,
);
}
}
protected loadFailed(error: Error) {
console.debug('Load Error:', error);
console.error('Load Error:', error.message);
if (this.loadFailedMethod) {
this.loadFailedMethod?.call(error);
} else if (isDevMode()) {
console.warn('The form loading failed for: ' + this.form.controlId);
}
}
protected getSubmitValue(): T {
let value: T = undefined as any;
if (typeof this._formDefinition['getSubmitValue'] === 'function') {
value = this._formDefinition.getSubmitValue();
} else if (typeof this._formDefinition['toJSON'] === 'function') {
value = this._formDefinition.toJSON();
}
value = value ?? this.form.value;
return clone(value);
}
protected submit() {
const value = this.getSubmitValue();
if (this.submitMethod) {
Reflect.set(this, 'submitted', false);
this.submitting$.enable();
this.submitError$.next(null);
try {
const resultOrPromise = this.submitMethod.call(value, this.context());
if (isPromise(resultOrPromise)) {
resultOrPromise
.then((result) => {
Reflect.set(this, 'submitted', true);
this.rxapSubmit.emit(result);
this.submitSuccessful(result);
})
.catch((error) => {
this.submitError$.next(error);
this.submitFailed(error);
})
.finally(() => {
this.submitting$.disable();
this.cdr.detectChanges();
});
} else {
Reflect.set(this, 'submitted', true);
this.rxapSubmit.emit(resultOrPromise);
this.submitSuccessful(resultOrPromise);
this.submitting$.disable();
}
} catch (error: any) {
this.submitting$.disable();
this.submitError$.next(error);
this.submitFailed(error);
}
} else {
if (isDevMode()) {
console.warn(
'The form submit method is not defined for: ' + this.form.controlId,
);
}
this.rxapSubmit.emit(value);
this.submitSuccessful(value);
}
}
protected submitFailed(error: Error) {
console.debug('Submit Error:', error);
console.error('Submit Error:', error.message);
if (this.submitFailedMethod) {
this.submitFailedMethod.call(error);
} else if (isDevMode()) {
console.warn(
'The form submit failed method is not defined for: ' +
this.form.controlId,
);
}
}
protected submitSuccessful(value: any) {
this.submitSuccessful$.next(value);
if (this.submitSuccessfulMethod) {
this.submitSuccessfulMethod.call(value);
} else if (isDevMode()) {
console.warn(
'The form submit successful method is not defined for: ' +
this.form.controlId,
);
}
}
public override ngOnDestroy() {
super.ngOnDestroy();
this._autoSubmitSubscription?.unsubscribe();
function HasNgOnDestroyMethod(obj: any): obj is OnDestroy {
return obj && typeof obj.ngOnDestroy === 'function';
}
if (HasNgOnDestroyMethod(this._formDefinition)) {
this._formDefinition.ngOnDestroy();
}
}
}
</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 = 'directive';
var COMPODOC_CURRENT_PAGE_URL = 'FormDirective.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>