@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
3,900 lines • 161 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 class">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Classes</li>
<li class="breadcrumb-item" >RxapFormArray</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/form-array.ts</code>
</p>
<p class="comment">
<h3>Extends</h3>
</p>
<p class="comment">
<code>UntypedFormArray</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl</a></code>
</p>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#controlId" >controlId</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#controls" >controls</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#dirty$" >dirty$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#disabled$" >disabled$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#enabled$" >enabled$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<a href="#errors" >errors</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#errors$" >errors$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<a href="#status" >status</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#status$" >status$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<a href="#statusChanges" >statusChanges</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#touch$" >touch$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<a href="#value" >value</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#value$" >value$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<a href="#valueChanges" >valueChanges</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">Public</span>
<span class="modifier"></span>
<a href="#at" >at</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#disabledWhile" >disabledWhile</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#enabledWhile" >enabledWhile</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#getError" >getError</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#getRawValue" >getRawValue</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#hasError" >hasError</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#hasErrorAndDirty" >hasErrorAndDirty</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#hasErrorAndTouched" >hasErrorAndTouched</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#insert" >insert</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#insertAt" >insertAt</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#markAllAsDirty" >markAllAsDirty</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#markAllAsPristine" >markAllAsPristine</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#markAllAsUntouched" >markAllAsUntouched</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#markAsDirty" >markAsDirty</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#markAsPristine" >markAsPristine</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#markAsTouched" >markAsTouched</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#markAsUntouched" >markAsUntouched</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#mergeAsyncValidators" >mergeAsyncValidators</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#mergeValidators" >mergeValidators</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#patchValue" >patchValue</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#push" >push</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#removeAt" >removeAt</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#reset" >reset</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#select" >select</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#setAsyncValidators" >setAsyncValidators</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#setControl" >setControl</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setDisable" >setDisable</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setEnable" >setEnable</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#setErrors" >setErrors</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#setValidators" >setValidators</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#setValue" >setValue</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#validateOn" >validateOn</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="#readonly" >readonly</a>
</li>
<li>
<a href="#controlPath" >controlPath</a>
</li>
<li>
<a href="#fullControlPath" >fullControlPath</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(controls: <a href="../interfaces/AbstractControl.html" target="_self">Array<AbstractControl<T>></a>, options: <a href="../interfaces/FormArrayOptions.html" target="_self">FormArrayOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/lib/form-array.ts:129</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>controls</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >Array<AbstractControl<T>></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../interfaces/FormArrayOptions.html" target="_self" >FormArrayOptions</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</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="controlId"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>controlId</b></span>
<a href="#controlId"><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/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/lib/form-array.ts:118</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="controls"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>controls</b></span>
<a href="#controls"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/AbstractControl.html" target="_self" >Array<AbstractControl<T>></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/lib/form-array.ts:132</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dirty$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>dirty$</b></span>
<a href="#dirty$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.dirtyChanges
.asObservable()
.pipe(distinctUntilChanged())</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/lib/form-array.ts:124</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="disabled$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>disabled$</b></span>
<a href="#disabled$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>controlDisabled$(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/lib/form-array.ts:112</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="enabled$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>enabled$</b></span>
<a href="#enabled$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>controlEnabled$(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/lib/form-array.ts:114</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="errors"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<span ><b>errors</b></span>
<a href="#errors"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>E | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/lib/form-array.ts:115</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="errors$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>errors$</b></span>
<a href="#errors$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>controlErrorChanges$<E>(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/lib/form-array.ts:117</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="status"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<span ><b>status</b></span>
<a href="#status"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#ControlState" target="_self" >ControlState</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/lib/form-array.ts:111</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="status$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>status$</b></span>
<a href="#status$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>controlStatusChanges$(this)</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/form-array.ts:116</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="statusChanges"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<span ><b>statusChanges</b></span>
<a href="#statusChanges"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#ControlState" target="_self" >Observable<ControlState></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/form-array.ts:113</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="touch$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>touch$</b></span>
<a href="#touch$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.touchChanges
.asObservable()
.pipe(distinctUntilChanged())</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/lib/form-array.ts:120</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="value"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<span ><b>value</b></span>
<a href="#value"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>T[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/lib/form-array.ts:95</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="value$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>value$</b></span>
<a href="#value$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>controlValueChanges$<T[]>(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/lib/form-array.ts:109</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="valueChanges"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span class="modifier">Readonly</span>
<span ><b>valueChanges</b></span>
<a href="#valueChanges"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Observable<T[]></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/lib/form-array.ts:107</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="at"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>at</b></span>
<a href="#at"><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>at(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</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/form-array.ts:146</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl<T></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="disabledWhile"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>disabledWhile</b></span>
<a href="#disabledWhile"><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>disabledWhile(observable: Observable<boolean>, options?: <a href="../interfaces/ControlOptions.html" target="_self">ControlOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="193"
class="link-to-prism">src/lib/form-array.ts:193</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>observable</td>
<td>
<code>Observable<boolean></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</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><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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="enabledWhile"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>enabledWhile</b></span>
<a href="#enabledWhile"><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>enabledWhile(observable: Observable<boolean>, options?: <a href="../interfaces/ControlOptions.html" target="_self">ControlOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="200"
class="link-to-prism">src/lib/form-array.ts:200</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>observable</td>
<td>
<code>Observable<boolean></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</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><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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getError"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>getError</b></span>
<a href="#getError"><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>getError(errorCode: K, path?: <a href="../undefineds/ControlPath.html" target="_self">ControlPath</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="392"
class="link-to-prism">src/lib/form-array.ts:392</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Type parameters :</b>
<ul class="type-parameters">
<li>K</li>
</ul>
</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>errorCode</td>
<td>
<code>K</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>path</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlPath" target="_self" >ControlPath</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>E[K]</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="getRawValue"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>getRawValue</b></span>
<a href="#getRawValue"><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>getRawValue()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="150"
class="link-to-prism">src/lib/form-array.ts:150</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="hasError"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>hasError</b></span>
<a href="#hasError"><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>hasError(errorCode: <a href="../undefineds/ExtractStrings.html" target="_self">ExtractStrings<E></a>, path?: <a href="../undefineds/ControlPath.html" target="_self">ControlPath</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="384"
class="link-to-prism">src/lib/form-array.ts:384</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>errorCode</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ExtractStrings" target="_self" >ExtractStrings<E></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>path</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlPath" target="_self" >ControlPath</a></code>
</td>
<td>
Yes
</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasErrorAndDirty"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>hasErrorAndDirty</b></span>
<a href="#hasErrorAndDirty"><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>hasErrorAndDirty(errorCode: <a href="../undefineds/ExtractStrings.html" target="_self">ExtractStrings<E></a>, path?: <a href="../undefineds/ControlPath.html" target="_self">ControlPath</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="303"
class="link-to-prism">src/lib/form-array.ts:303</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>errorCode</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ExtractStrings" target="_self" >ExtractStrings<E></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>path</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlPath" target="_self" >ControlPath</a></code>
</td>
<td>
Yes
</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="hasErrorAndTouched"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>hasErrorAndTouched</b></span>
<a href="#hasErrorAndTouched"><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>hasErrorAndTouched(errorCode: <a href="../undefineds/ExtractStrings.html" target="_self">ExtractStrings<E></a>, path?: <a href="../undefineds/ControlPath.html" target="_self">ControlPath</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="251"
class="link-to-prism">src/lib/form-array.ts:251</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>errorCode</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ExtractStrings" target="_self" >ExtractStrings<E></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>path</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlPath" target="_self" >ControlPath</a></code>
</td>
<td>
Yes
</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="insert"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>insert</b></span>
<a href="#insert"><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>insert(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl<T></a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="154"
class="link-to-prism">src/lib/form-array.ts:154</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl<T></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="insertAt"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>insertAt</b></span>
<a href="#insertAt"><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>insertAt(index?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, state?: T, options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="169"
class="link-to-prism">src/lib/form-array.ts:169</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>inserts a new control at the specified index. If the index is undefined
the new control will be added to the end.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
Yes
</td>
<td>
<p>(optional) the index where the control should be created</p>
</td>
</tr>
<tr>
<td>state</td>
<td>
<code>T</code>
</td>
<td>
Yes
</td>
<td>
<p>(optional) the initial state of the new control</p>
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</td>
<td>
<p>(optional) ControlEventOptions</p>
</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="markAllAsDirty"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>markAllAsDirty</b></span>
<a href="#markAllAsDirty"><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>markAllAsDirty()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="219"
class="link-to-prism">src/lib/form-array.ts:219</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="markAllAsPristine"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>markAllAsPristine</b></span>
<a href="#markAllAsPristine"><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>markAllAsPristine()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="223"
class="link-to-prism">src/lib/form-array.ts:223</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="markAllAsUntouched"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>markAllAsUntouched</b></span>
<a href="#markAllAsUntouched"><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>markAllAsUntouched()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="241"
class="link-to-prism">src/lib/form-array.ts:241</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="markAsDirty"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>markAsDirty</b></span>
<a href="#markAsDirty"><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>markAsDirty(opts?: <a href="../undefineds/OnlySelf.html" target="_self">OnlySelf</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="355"
class="link-to-prism">src/lib/form-array.ts:355</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>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#OnlySelf" target="_self" >OnlySelf</a></code>
</td>
<td>
Yes
</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="markAsPristine"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>markAsPristine</b></span>
<a href="#markAsPristine"><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>markAsPristine(opts?: <a href="../undefineds/OnlySelf.html" target="_self">OnlySelf</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="350"
class="link-to-prism">src/lib/form-array.ts:350</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>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#OnlySelf" target="_self" >OnlySelf</a></code>
</td>
<td>
Yes
</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="markAsTouched"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>markAsTouched</b></span>
<a href="#markAsTouched"><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>markAsTouched(opts?: <a href="../undefineds/OnlySelf.html" target="_self">OnlySelf</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="340"
class="link-to-prism">src/lib/form-array.ts:340</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>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#OnlySelf" target="_self" >OnlySelf</a></code>
</td>
<td>
Yes
</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="markAsUntouched"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>markAsUntouched</b></span>
<a href="#markAsUntouched"><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>markAsUntouched(opts?: <a href="../undefineds/OnlySelf.html" target="_self">OnlySelf</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="345"
class="link-to-prism">src/lib/form-array.ts:345</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>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#OnlySelf" target="_self" >OnlySelf</a></code>
</td>
<td>
Yes
</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="mergeAsyncValidators"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>mergeAsyncValidators</b></span>
<a href="#mergeAsyncValidators"><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>mergeAsyncValidators(validators: <a href="../undefineds/AsyncValidator.html" target="_self">AsyncValidator</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="211"
class="link-to-prism">src/lib/form-array.ts:211</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>validators</td>
<td>
<code><a href="../miscellaneous/typealiases.html#AsyncValidator" target="_self" >AsyncValidator</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="mergeValidators"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>mergeValidators</b></span>
<a href="#mergeValidators"><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>mergeValidators(validators: <a href="../undefineds/Validator.html" target="_self">Validator</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="207"
class="link-to-prism">src/lib/form-array.ts:207</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>validators</td>
<td>
<code><a href="../miscellaneous/typealiases.html#Validator" target="_self" >Validator</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="patchValue"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>patchValue</b></span>
<a href="#patchValue"><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>patchValue(valueOrObservable: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>, options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="290"
class="link-to-prism">src/lib/form-array.ts:290</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>valueOrObservable</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Subscription | void</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="push"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>push</b></span>
<a href="#push"><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>push(control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl<T></a>, options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</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/form-array.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>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl<T></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</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="removeAt"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>removeAt</b></span>
<a href="#removeAt"><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>removeAt(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="310"
class="link-to-prism">src/lib/form-array.ts:310</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</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="reset"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>reset</b></span>
<a href="#reset"><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>reset(value?: T[], options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="360"
class="link-to-prism">src/lib/form-array.ts:360</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>T[]</code>
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</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="select"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>select</b></span>
<a href="#select"><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>select(mapFn: (state: T[]) => void)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="142"
class="link-to-prism">src/lib/form-array.ts:142</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Type parameters :</b>
<ul class="type-parameters">
<li>R</li>
</ul>
</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>mapFn</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Observable<R></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="setAsyncValidators"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>setAsyncValidators</b></span>
<a href="#setAsyncValidators"><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>setAsyncValidators(newValidator: <a href="../undefineds/AsyncValidator.html" target="_self">AsyncValidator</a>, updateValueAndValidity)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="374"
class="link-to-prism">src/lib/form-array.ts:374</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>newValidator</td>
<td>
<code><a href="../miscellaneous/typealiases.html#AsyncValidator" target="_self" >AsyncValidator</a></code>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>updateValueAndValidity</td>
<td>
</td>
<td>
No
</td>
<td>
<code>true</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" >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="setControl"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>setControl</b></span>
<a href="#setControl"><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>setControl(index: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>, control: <a href="../interfaces/AbstractControl.html" target="_self">AbstractControl<T></a>, options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="333"
class="link-to-prism">src/lib/form-array.ts:333</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>index</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>control</td>
<td>
<code><a href="../interfaces/AbstractControl.html" target="_self" >AbstractControl<T></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</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="setDisable"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setDisable</b></span>
<a href="#setDisable"><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>setDisable(disable, opts?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="329"
class="link-to-prism">src/lib/form-array.ts:329</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>disable</td>
<td>
</td>
<td>
No
</td>
<td>
<code>true</code>
</td>
</tr>
<tr>
<td>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</td>
<td>
</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="setEnable"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setEnable</b></span>
<a href="#setEnable"><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>setEnable(enable, opts?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="318"
class="link-to-prism">src/lib/form-array.ts:318</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>enable</td>
<td>
</td>
<td>
No
</td>
<td>
<code>true</code>
</td>
</tr>
<tr>
<td>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</td>
<td>
</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="setErrors"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>setErrors</b></span>
<a href="#setErrors"><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>setErrors(errors: Partial<E> | null, opts: <a href="../undefineds/EmitEvent.html" target="_self">EmitEvent</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="388"
class="link-to-prism">src/lib/form-array.ts:388</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>errors</td>
<td>
<code>Partial<E> | null</code>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>opts</td>
<td>
<code><a href="../miscellaneous/typealiases.html#EmitEvent" target="_self" >EmitEvent</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://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</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="setValidators"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>setValidators</b></span>
<a href="#setValidators"><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>setValidators(newValidator: <a href="../undefineds/Validator.html" target="_self">Validator</a>, updateValueAndValidity)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="364"
class="link-to-prism">src/lib/form-array.ts:364</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>newValidator</td>
<td>
<code><a href="../miscellaneous/typealiases.html#Validator" target="_self" >Validator</a></code>
</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>updateValueAndValidity</td>
<td>
</td>
<td>
No
</td>
<td>
<code>true</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" >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="setValue"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>setValue</b></span>
<a href="#setValue"><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>setValue(valueOrObservable: T[] | Observable<T[]>, options?: <a href="../undefineds/ControlEventOptions.html" target="_self">ControlEventOptions</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="227"
class="link-to-prism">src/lib/form-array.ts:227</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>valueOrObservable</td>
<td>
<code>T[] | Observable<T[]></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>options</td>
<td>
<code><a href="../miscellaneous/typealiases.html#ControlEventOptions" target="_self" >ControlEventOptions</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>Subscription | void</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="validateOn"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>validateOn</b></span>
<a href="#validateOn"><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>validateOn(observableValidation: Observable<null | object>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="245"
class="link-to-prism">src/lib/form-array.ts:245</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>observableValidation</td>
<td>
<code>Observable<null | object></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" >any</a></code>
</div>
<div class="io-description">
</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="readonly"></a>
<span class="name"><b>readonly</b><a href="#readonly"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>readonly()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/form-array.ts:63</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>readonly(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/form-array.ts:67</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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</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="controlPath"></a>
<span class="name"><b>controlPath</b><a href="#controlPath"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>controlPath()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="81" class="link-to-prism">src/lib/form-array.ts:81</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fullControlPath"></a>
<span class="name"><b>fullControlPath</b><a href="#fullControlPath"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>fullControlPath()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/lib/form-array.ts:97</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 {
AbstractControl as NgAbstractControl,
UntypedFormArray,
} from '@angular/forms';
import {
AbstractControl,
AsyncValidator,
ControlEventOptions,
ControlOptions,
ControlPath,
ControlState,
EmitEvent,
ExtractStrings,
OnlySelf,
Validator,
} from './types';
import {
distinctUntilChanged,
map,
} from 'rxjs/operators';
import {
isObservable,
Observable,
Subject,
Subscription,
} from 'rxjs';
import {
controlDisabled$,
controlDisabledWhile,
controlEnabled$,
controlEnabledWhile,
controlErrorChanges$,
controlStatusChanges$,
controlValueChanges$,
disableControl,
enableControl,
hasErrorAndDirty,
hasErrorAndTouched,
markAllDirty,
markAllPristine,
markAllUntouched,
mergeControlValidators,
} from './control-actions';
import { coerceArray } from '@rxap/utilities';
import {
ControlInsertedFn,
ControlRemovedFn,
FormArrayOptions,
FormBuilderFn,
FormDefinition,
FormType,
} from './model';
import { isDevMode } from '@angular/core';
export class RxapFormArray<T = any,
E extends object = any,
Parent extends object = any>
extends UntypedFormArray
implements AbstractControl<T[]> {
private _readonly = false;
public get readonly(): boolean {
return (this.parent as any)?.readonly ?? this._readonly;
}
public set readonly(value: boolean) {
this._readonly = value;
this.controls.forEach(control => (control as any).stateChanges?.next());
}
/**
* @internal
*/
public get rxapFormDefinition():
| (FormType<Parent> & FormDefinition<Parent>)
| undefined {
return (this.parent as any).rxapFormDefinition;
}
public get controlPath(): string {
const parent: any = this.parent;
if (parent) {
if (parent.controlPath) {
if (parent === this.root) {
return this.controlId;
} else {
return [ parent.controlPath, this.controlId ].join('.');
}
}
}
return this.controlId;
}
public override readonly value!: T[];
public get fullControlPath(): string {
const parent: any = this.parent;
if (parent) {
if (parent.fullControlPath) {
return [ parent.fullControlPath, this.controlId ].join('.');
}
}
return this.controlId;
}
public override readonly valueChanges!: Observable<T[]>;
public readonly value$ = controlValueChanges$<T[]>(this);
// @ts-expect-error overwrite the public type
public override readonly status!: ControlState;
public readonly disabled$ = controlDisabled$(this);
public override readonly statusChanges!: Observable<ControlState>;
public readonly enabled$ = controlEnabled$(this);
public override readonly errors!: E | null;
public readonly status$ = controlStatusChanges$(this);
public readonly errors$ = controlErrorChanges$<E>(this);
public readonly controlId: string;
private readonly touchChanges = new Subject<boolean>();
public readonly touch$ = this.touchChanges
.asObservable()
.pipe(distinctUntilChanged());
private readonly dirtyChanges = new Subject<boolean>();
public readonly dirty$ = this.dirtyChanges
.asObservable()
.pipe(distinctUntilChanged());
private readonly _builder: FormBuilderFn;
private readonly _controlInsertedFn: ControlInsertedFn;
private readonly _controlRemovedFn: ControlRemovedFn;
constructor(
public override controls: Array<AbstractControl<T>>,
options: FormArrayOptions,
) {
super(controls, options);
this.controlId = options.controlId;
this._builder = options.builder;
this._controlInsertedFn = options.controlInsertedFn;
this._controlRemovedFn = options.controlRemovedFn;
}
public select<R>(mapFn: (state: T[]) => R): Observable<R> {
return this.value$.pipe(map(mapFn), distinctUntilChanged());
}
public override at(index: number): AbstractControl<T> {
return super.at(index) as AbstractControl<T>;
}
public override getRawValue(): T[] {
return super.getRawValue();
}
public override insert(index: number, control: AbstractControl<T>): void {
if (isDevMode()) {
console.warn('It is not recommend to use the FormArray.insert method');
}
return super.insert(index, control);
}
/**
* inserts a new control at the specified index. If the index is undefined
* the new control will be added to the end.
*
* @param index (optional) the index where the control should be created
* @param state (optional) the initial state of the new control
* @param options (optional) ControlEventOptions
*/
public insertAt(index?: number, state?: T, options?: ControlEventOptions): void {
const insertIndex = index ?? this.controls.length;
const controlOrDefinition = this._builder(state, {
controlId: insertIndex.toFixed(0),
});
this._controlInsertedFn(insertIndex, controlOrDefinition);
if (insertIndex < this.controls.length) {
// update the control ids for all controls, that are moved.
for (let i = insertIndex; i < this.controls.length; i++) {
Reflect.set(this.controls[i], 'controlId', (i + 1).toFixed(0));
}
}
// call the super insert after the update, bc the insert method will
// trigger a change detection
if (controlOrDefinition instanceof NgAbstractControl) {
super.insert(insertIndex, controlOrDefinition, options);
} else {
super.insert(insertIndex, controlOrDefinition.rxapFormGroup!, options);
}
}
public disabledWhile(
observable: Observable<boolean>,
options?: ControlOptions,
) {
return controlDisabledWhile(this, observable, options);
}
public enabledWhile(
observable: Observable<boolean>,
options?: ControlOptions,
) {
return controlEnabledWhile(this, observable, options);
}
public mergeValidators(validators: Validator) {
mergeControlValidators(this, validators);
}
public mergeAsyncValidators(validators: AsyncValidator) {
this.setAsyncValidators([
...coerceArray(this.asyncValidator),
...coerceArray(validators),
]);
this.updateValueAndValidity();
}
public markAllAsDirty(): void {
markAllDirty(this);
}
public markAllAsPristine(): void {
markAllPristine(this);
}
public override setValue(
valueOrObservable: T[] | Observable<T[]>,
options?: ControlEventOptions,
): Subscription | void {
if (isObservable(valueOrObservable)) {
return valueOrObservable.subscribe((value) => {
super.setValue(value, options);
},
);
}
super.setValue(valueOrObservable, options);
}
public markAllAsUntouched(): void {
markAllUntouched(this);
}
public validateOn(observableValidation: Observable<null | object>) {
return observableValidation.subscribe((maybeError) => {
this.setErrors(maybeError);
});
}
public hasErrorAndTouched(
errorCode: ExtractStrings<E>,
path?: ControlPath,
): boolean {
return hasErrorAndTouched(this, errorCode, path);
}
private _patchValue(value: T[], options?: ControlEventOptions) {
// Even though the `value` argument type doesn't allow `null` and `undefined` values, the
// `patchValue` can be called recursively and inner data structures might have these values, so
// we just ignore such cases when a field containing FormArray instance receives `null` or
// `undefined` as a value.
if (value == null /* both `null` and `undefined` */) {
return;
}
if (options?.strict) {
if (this.length > value.length) {
for (let index = this.length - 1; index >= value.length; index--) {
this.removeAt(index);
}
}
}
value.forEach((newValue, index) => {
if (this.at(index)) {
this.at(index)
.patchValue(
newValue,
{
...(options ?? {}),
onlySelf: true,
},
);
} else if (options?.coerce) {
this.insertAt(index, value[index]);
}
});
this.updateValueAndValidity(options);
}
public override patchValue(
valueOrObservable: any,
options?: ControlEventOptions,
): Subscription | void {
if (isObservable(valueOrObservable)) {
return (valueOrObservable as Observable<T[]>).subscribe((value: T[]) => {
this._patchValue(value, options);
});
}
this._patchValue(valueOrObservable as T[], options);
}
public hasErrorAndDirty(
errorCode: ExtractStrings<E>,
path?: ControlPath,
): boolean {
return hasErrorAndDirty(this, errorCode, path);
}
public override removeAt(index: number) {
if (isDevMode()) {
console.warn('It is not recommend to use the FormArray.removeAt method');
}
super.removeAt(index);
this._controlRemovedFn(index);
}
public setEnable(enable = true, opts?: ControlEventOptions) {
enableControl(this, enable, opts);
}
public override push(control: AbstractControl<T>, options?: ControlEventOptions): void {
if (isDevMode()) {
console.warn('It is not recommend to use the FormArray.push method');
}
return super.push(control, options);
}
public setDisable(disable = true, opts?: ControlEventOptions) {
disableControl(this, disable, opts);
}
public override setControl(index: number, control: AbstractControl<T>, options?: ControlEventOptions): void {
if (isDevMode()) {
console.warn('It is not recommend to use the FormArray.setControl method');
}
return super.setControl(index, control, options);
}
public override markAsTouched(opts?: OnlySelf): void {
super.markAsTouched(opts);
this.touchChanges.next(true);
}
public override markAsUntouched(opts?: OnlySelf): void {
super.markAsUntouched(opts);
this.touchChanges.next(false);
}
public override markAsPristine(opts?: OnlySelf): void {
super.markAsPristine(opts);
this.dirtyChanges.next(false);
}
public override markAsDirty(opts?: OnlySelf): void {
super.markAsDirty(opts);
this.dirtyChanges.next(true);
}
public override reset(value?: T[], options?: ControlEventOptions): void {
super.reset(value, options);
}
public override setValidators(
newValidator: Validator,
updateValueAndValidity = true,
): void {
super.setValidators(newValidator);
if (updateValueAndValidity) {
super.updateValueAndValidity();
}
}
public override setAsyncValidators(
newValidator: AsyncValidator,
updateValueAndValidity = true,
): void {
super.setAsyncValidators(newValidator);
if (updateValueAndValidity) {
super.updateValueAndValidity();
}
}
public override hasError(errorCode: ExtractStrings<E>, path?: ControlPath) {
return super.hasError(errorCode, path);
}
public override setErrors(errors: Partial<E> | null, opts: EmitEvent = {}) {
return super.setErrors(errors, opts);
}
public override getError<K extends ExtractStrings<E>>(
errorCode: K,
path?: ControlPath,
) {
return super.getError(errorCode, path) as E[K] | null;
}
}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'class';
var COMPODOC_CURRENT_PAGE_URL = 'RxapFormArray.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>