@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
1,141 lines (956 loc) • 160 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 miscellaneous-functions">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Miscellaneous</li>
<li class="breadcrumb-item">Functions</li>
</ol>
<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">
<ul class="index-list">
<li>
<a href="#_IsNumber" title="src/lib/validators/is-number.ts" ><b>_IsNumber</b> (src/.../is-number.ts)</a>
</li>
<li>
<a href="#check" title="src/lib/validators/is-complex.ts" ><b>check</b> (src/.../is-complex.ts)</a>
</li>
<li>
<a href="#checkError" title="src/lib/validators/is-complex.ts" ><b>checkError</b> (src/.../is-complex.ts)</a>
</li>
<li>
<a href="#ControlAsyncValidator" title="src/lib/decorators/control-async-validator.ts" ><b>ControlAsyncValidator</b> (src/.../control-async-validator.ts)</a>
</li>
<li>
<a href="#ControlChange" title="src/lib/decorators/control-change.ts" ><b>ControlChange</b> (src/.../control-change.ts)</a>
</li>
<li>
<a href="#controlDisabled$" title="src/lib/control-actions.ts" ><b>controlDisabled$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#controlDisabledWhile" title="src/lib/control-actions.ts" ><b>controlDisabledWhile</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#controlEnabled$" title="src/lib/control-actions.ts" ><b>controlEnabled$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#controlEnabledWhile" title="src/lib/control-actions.ts" ><b>controlEnabledWhile</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#controlErrorChanges$" title="src/lib/control-actions.ts" ><b>controlErrorChanges$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#controlReadonly$" title="src/lib/control-actions.ts" ><b>controlReadonly$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#ControlSetValue" title="src/lib/decorators/control-set-value.ts" ><b>ControlSetValue</b> (src/.../control-set-value.ts)</a>
</li>
<li>
<a href="#controlStatusChanges$" title="src/lib/control-actions.ts" ><b>controlStatusChanges$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#ControlValidator" title="src/lib/decorators/control-validator.ts" ><b>ControlValidator</b> (src/.../control-validator.ts)</a>
</li>
<li>
<a href="#controlValueChanges$" title="src/lib/control-actions.ts" ><b>controlValueChanges$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#create" title="src/lib/validators/is-complex.ts" ><b>create</b> (src/.../is-complex.ts)</a>
</li>
<li>
<a href="#disableControl" title="src/lib/control-actions.ts" ><b>disableControl</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#enableControl" title="src/lib/control-actions.ts" ><b>enableControl</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#getControlValue" title="src/lib/control-actions.ts" ><b>getControlValue</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#hasErrorAndDirty" title="src/lib/control-actions.ts" ><b>hasErrorAndDirty</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#hasErrorAndTouched" title="src/lib/control-actions.ts" ><b>hasErrorAndTouched</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#initGenerator" title="src/generators/init/generator.ts" ><b>initGenerator</b> (src/.../generator.ts)</a>
</li>
<li>
<a href="#inOperator" title="src/lib/validators/is-complex.ts" ><b>inOperator</b> (src/.../is-complex.ts)</a>
</li>
<li>
<a href="#IsArray" title="src/lib/validators/is-array.ts" ><b>IsArray</b> (src/.../is-array.ts)</a>
</li>
<li>
<a href="#IsBoolean" title="src/lib/validators/is-boolean.ts" ><b>IsBoolean</b> (src/.../is-boolean.ts)</a>
</li>
<li>
<a href="#IsComplex" title="src/lib/validators/is-complex.ts" ><b>IsComplex</b> (src/.../is-complex.ts)</a>
</li>
<li>
<a href="#IsDate" title="src/lib/validators/is-date.ts" ><b>IsDate</b> (src/.../is-date.ts)</a>
</li>
<li>
<a href="#IsEmail" title="src/lib/validators/is-email.ts" ><b>IsEmail</b> (src/.../is-email.ts)</a>
</li>
<li>
<a href="#IsEnum" title="src/lib/validators/is-enum.ts" ><b>IsEnum</b> (src/.../is-enum.ts)</a>
</li>
<li>
<a href="#IsInt" title="src/lib/validators/is-int.ts" ><b>IsInt</b> (src/.../is-int.ts)</a>
</li>
<li>
<a href="#IsIP" title="src/lib/validators/is-ip.ts" ><b>IsIP</b> (src/.../is-ip.ts)</a>
</li>
<li>
<a href="#isNumber" title="src/lib/validators/is-number.ts" ><b>isNumber</b> (src/.../is-number.ts)</a>
</li>
<li>
<a href="#IsNumber" title="src/lib/validators/is-number.ts" class="deprecated-name"><b>IsNumber</b> (src/.../is-number.ts)</a>
</li>
<li>
<a href="#IsObject" title="src/lib/validators/is-object.ts" ><b>IsObject</b> (src/.../is-object.ts)</a>
</li>
<li>
<a href="#IsPhoneNumber" title="src/lib/validators/is-phone-number.ts" ><b>IsPhoneNumber</b> (src/.../is-phone-number.ts)</a>
</li>
<li>
<a href="#IsPort" title="src/lib/validators/is-port.ts" ><b>IsPort</b> (src/.../is-port.ts)</a>
</li>
<li>
<a href="#IsString" title="src/lib/validators/is-string.ts" ><b>IsString</b> (src/.../is-string.ts)</a>
</li>
<li>
<a href="#IsUrl" title="src/lib/validators/is-url.ts" ><b>IsUrl</b> (src/.../is-url.ts)</a>
</li>
<li>
<a href="#IsUUID" title="src/lib/validators/is-uuid.ts" ><b>IsUUID</b> (src/.../is-uuid.ts)</a>
</li>
<li>
<a href="#markAllDirty" title="src/lib/control-actions.ts" ><b>markAllDirty</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#markAllPristine" title="src/lib/control-actions.ts" ><b>markAllPristine</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#markAllUntouched" title="src/lib/control-actions.ts" ><b>markAllUntouched</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#mergeControlValidators" title="src/lib/control-actions.ts" ><b>mergeControlValidators</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#RxapForm" title="src/lib/decorators/form.ts" ><b>RxapForm</b> (src/.../form.ts)</a>
</li>
<li>
<a href="#selectControlValue$" title="src/lib/control-actions.ts" ><b>selectControlValue$</b> (src/.../control-actions.ts)</a>
</li>
<li>
<a href="#ToFormMethod" title="src/lib/directives/models.ts" ><b>ToFormMethod</b> (src/.../models.ts)</a>
</li>
<li>
<a href="#ToFormSubmitMethod" title="src/lib/directives/models.ts" class="deprecated-name"><b>ToFormSubmitMethod</b> (src/.../models.ts)</a>
</li>
<li>
<a href="#UseFormArrayControl" title="src/lib/decorators/use-form-array.ts" ><b>UseFormArrayControl</b> (src/.../use-form-array.ts)</a>
</li>
<li>
<a href="#UseFormArrayGroup" title="src/lib/decorators/use-form-array.ts" ><b>UseFormArrayGroup</b> (src/.../use-form-array.ts)</a>
</li>
<li>
<a href="#UseFormControl" title="src/lib/decorators/use-form-control.ts" ><b>UseFormControl</b> (src/.../use-form-control.ts)</a>
</li>
<li>
<a href="#UseFormGroup" title="src/lib/decorators/use-form-group.ts" ><b>UseFormGroup</b> (src/.../use-form-group.ts)</a>
</li>
<li>
<a href="#validateControlOn" title="src/lib/control-actions.ts" ><b>validateControlOn</b> (src/.../control-actions.ts)</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<h3>src/lib/validators/is-number.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_IsNumber"></a>
<span class="name">
<span ><b>_IsNumber</b></span>
<a href="#_IsNumber"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_IsNumber(__namedParameters: {message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, options: <a href="../interfaces/IsNumberOptions.html" target="_self">IsNumberOptions</a>})</code>
</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>message</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../interfaces/IsNumberOptions.html" target="_self" >IsNumberOptions</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isNumber"></a>
<span class="name">
<span ><b>isNumber</b></span>
<a href="#isNumber"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isNumber(value, options: <a href="../interfaces/IsNumberOptions.html" target="_self">IsNumberOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Checks if a given value is a number.</p>
</div>
<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>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../interfaces/IsNumberOptions.html" target="_self" >IsNumberOptions</a></code>
</td>
<td>
No
</td>
<td>
<code>{}</code>
</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/number" target="_blank" >number</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="IsNumber"></a>
<span class="name">
<span class="deprecated-name"><b>IsNumber</b></span>
<a href="#IsNumber"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4 deprecated">
use RxapValidators.isNumber() instead
</td>
</tr>
<tr>
<td class="col-md-4">
<code>IsNumber(control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl</a>)</code>
</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>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../miscellaneous/typealiases.html#ValidationErrors" target="_self" >ValidationErrors | null</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/lib/validators/is-complex.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="check"></a>
<span class="name">
<span ><b>check</b></span>
<a href="#check"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>check(str: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, regexStringOrOptions)</code>
</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>str</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>regexStringOrOptions</td>
<td>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="checkError"></a>
<span class="name">
<span ><b>checkError</b></span>
<a href="#checkError"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>checkError(str: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, options: <a href="../interfaces/ComplexityOptions.html" target="_self">ComplexityOptions</a>)</code>
</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>str</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../interfaces/ComplexityOptions.html" target="_self" >ComplexityOptions</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="create"></a>
<span class="name">
<span ><b>create</b></span>
<a href="#create"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>create(options: <a href="../interfaces/ComplexityOptions.html" target="_self">ComplexityOptions</a>)</code>
</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>options</td>
<td>
<code><a href="../interfaces/ComplexityOptions.html" target="_self" >ComplexityOptions</a></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/string" target="_blank" >string</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="inOperator"></a>
<span class="name">
<span ><b>inOperator</b></span>
<a href="#inOperator"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>inOperator(k: K, o: T)</code>
</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>k</td>
<td>
<code>K</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>o</td>
<td>
<code>T</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../miscellaneous/typealiases.html#Discriminate" target="_self" >Discriminate<T | K></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="IsComplex"></a>
<span class="name">
<span ><b>IsComplex</b></span>
<a href="#IsComplex"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>IsComplex(__namedParameters: {message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, options: <a href="../interfaces/ComplexityOptions.html" target="_self">ComplexityOptions</a>})</code>
</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>message</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../interfaces/ComplexityOptions.html" target="_self" >ComplexityOptions</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/lib/decorators/control-async-validator.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ControlAsyncValidator"></a>
<span class="name">
<span ><b>ControlAsyncValidator</b></span>
<a href="#ControlAsyncValidator"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ControlAsyncValidator(...controlIds: undefined)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>controlIds</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/lib/decorators/control-change.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ControlChange"></a>
<span class="name">
<span ><b>ControlChange</b></span>
<a href="#ControlChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ControlChange(...controlIds: undefined)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>controlIds</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section> <h3>src/lib/control-actions.ts</h3>
<section data-compodoc="block-methods">
<h3></h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="controlDisabled$"></a>
<span class="name">
<span ><b>controlDisabled$</b></span>
<a href="#controlDisabled$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>controlDisabled$(control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl</a>)</code>
</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>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Observable<boolean></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="controlDisabledWhile"></a>
<span class="name">
<span ><b>controlDisabledWhile</b></span>
<a href="#controlDisabledWhile"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>controlDisabledWhile(control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl</a>, observable: Observable, opts?: <a href="../interfaces/ControlOptions.html" target="_self">ControlOptions</a>)</code>
</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>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>observable</td>
<td>
<code>Observable</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>opts</td>
<td>
<code><a href="../interfaces/ControlOptions.html" target="_self" >ControlOptions</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Subscription</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="controlEnabled$"></a>
<span class="name">
<span ><b>controlEnabled$</b></span>
<a href="#controlEnabled$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>controlEnabled$(control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl</a>)</code>
</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>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Observable<boolean></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