@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
73 lines • 87.7 kB
HTML
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>FormControlNameDirective | @rxap/forms - v19.1.0</title><meta name="description" content="Documentation for @rxap/forms"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">@rxap/forms - v19.1.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">@rxap/forms</a></li><li><a href="FormControlNameDirective.html">FormControlNameDirective</a></li></ul><h1 class="deprecated">Class FormControlNameDirective</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>A full exertion of FormControlName from @angular/forms. The only change is the
ability to access the control container outside of the current component</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link"><a id="deprecated" class="tsd-anchor"></a>Deprecated<a href="#deprecated" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>use the ParentControlContainerDirective</p>
</div></div></section><section class="tsd-panel tsd-hierarchy" data-refl="349"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-signature-type">FormControlName</span><ul class="tsd-hierarchy"><li class="tsd-hierarchy-item"><span class="tsd-hierarchy-target">FormControlNameDirective</span></li></ul></li></ul></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/forms/src/lib/directives/form-control-name.directive.ts#L42">packages/angular/forms/src/lib/directives/form-control-name.directive.ts:42</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="FormControlNameDirective.html#constructor" class="tsd-index-link deprecated"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="FormControlNameDirective.html#control" class="tsd-index-link deprecated"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>control</span></a>
<a href="FormControlNameDirective.html#model" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>model</span></a>
<a href="FormControlNameDirective.html#name" class="tsd-index-link deprecated"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>name</span></a>
<a href="FormControlNameDirective.html#update" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>update</span></a>
<a href="FormControlNameDirective.html#valueaccessor" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>value<wbr/>Accessor</span></a>
<a href="FormControlNameDirective.html#ɵdir" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>ɵdir</span></a>
<a href="FormControlNameDirective.html#ɵfac" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>ɵfac</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="FormControlNameDirective.html#asyncvalidator" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>async<wbr/>Validator</span></a>
<a href="FormControlNameDirective.html#dirty" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>dirty</span></a>
<a href="FormControlNameDirective.html#disabled" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>disabled</span></a>
<a href="FormControlNameDirective.html#enabled" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>enabled</span></a>
<a href="FormControlNameDirective.html#errors" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>errors</span></a>
<a href="FormControlNameDirective.html#formdirective" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>form<wbr/>Directive</span></a>
<a href="FormControlNameDirective.html#invalid" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>invalid</span></a>
<a href="FormControlNameDirective.html#isdisabled" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>is<wbr/>Disabled</span></a>
<a href="FormControlNameDirective.html#path" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>path</span></a>
<a href="FormControlNameDirective.html#pending" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pending</span></a>
<a href="FormControlNameDirective.html#pristine" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pristine</span></a>
<a href="FormControlNameDirective.html#status" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>status</span></a>
<a href="FormControlNameDirective.html#statuschanges" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>status<wbr/>Changes</span></a>
<a href="FormControlNameDirective.html#touched" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>touched</span></a>
<a href="FormControlNameDirective.html#untouched" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>untouched</span></a>
<a href="FormControlNameDirective.html#valid" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>valid</span></a>
<a href="FormControlNameDirective.html#validator" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>validator</span></a>
<a href="FormControlNameDirective.html#value" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>value</span></a>
<a href="FormControlNameDirective.html#valuechanges" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Accessor"><use href="../assets/icons.svg#icon-262144"></use></svg><span>value<wbr/>Changes</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="FormControlNameDirective.html#geterror" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Error</span></a>
<a href="FormControlNameDirective.html#haserror" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>has<wbr/>Error</span></a>
<a href="FormControlNameDirective.html#ngonchanges" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>ng<wbr/>On<wbr/>Changes</span></a>
<a href="FormControlNameDirective.html#ngondestroy" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>ng<wbr/>On<wbr/>Destroy</span></a>
<a href="FormControlNameDirective.html#reset" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>reset</span></a>
<a href="FormControlNameDirective.html#viewtomodelupdate" class="tsd-index-link deprecated tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>view<wbr/>To<wbr/>Model<wbr/>Update</span></a>
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Constructors"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Constructors</h2></summary><section><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link"><a id="constructorformcontrolnamedirective" class="tsd-anchor"></a><span class="tsd-signature-keyword">new</span> <span class="tsd-kind-constructor-signature">FormControlNameDirective</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">parent</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ControlContainer</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">validators</span><span class="tsd-signature-symbol">:</span> (<span class="tsd-signature-type">Validator</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">ValidatorFn</span>)<span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">asyncValidators</span><span class="tsd-signature-symbol">:</span> (<span class="tsd-signature-type">AsyncValidator</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">AsyncValidatorFn</span>)<span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">valueAccessors</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ControlValueAccessor</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="FormControlNameDirective.html" class="tsd-signature-type tsd-kind-class">FormControlNameDirective</a><a href="#constructorformcontrolnamedirective" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">parent</span>: <span class="tsd-signature-type">ControlContainer</span></span></li><li><span><span class="tsd-kind-parameter">validators</span>: (<span class="tsd-signature-type">Validator</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">ValidatorFn</span>)<span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">asyncValidators</span>: (<span class="tsd-signature-type">AsyncValidator</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">AsyncValidatorFn</span>)<span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">valueAccessors</span>: <span class="tsd-signature-type">ControlValueAccessor</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="FormControlNameDirective.html" class="tsd-signature-type tsd-kind-class">FormControlNameDirective</a></h4><aside class="tsd-sources"><p>Overrides FormControlName.constructor</p><ul><li>Defined in <a href="https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/forms/src/lib/directives/form-control-name.directive.ts#L49">packages/angular/forms/src/lib/directives/form-control-name.directive.ts:49</a></li></ul></aside></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="control" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Readonly</code><span class="deprecated">control</span><a href="#control" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">control</span><span class="tsd-signature-symbol">:</span> <a href="RxapFormControl.html" class="tsd-signature-type tsd-kind-class">RxapFormControl</a></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description" class="tsd-anchor"></a>Description<a href="#description" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Tracks the <code>FormControl</code> instance bound to the directive.</p>
</div></div><aside class="tsd-sources"><p>Overrides FormControlName.control</p><ul><li>Defined in <a href="https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/forms/src/lib/directives/form-control-name.directive.ts#L44">packages/angular/forms/src/lib/directives/form-control-name.directive.ts:44</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="model" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">model</span><a href="#model" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">model</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link"><a id="deprecated-1" class="tsd-anchor"></a>Deprecated<a href="#deprecated-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>as of v6</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.model</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3681</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="name" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">name</span><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">name</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-1" class="tsd-anchor"></a>Description<a href="#description-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Tracks the name of the <code>FormControl</code> bound to the directive. The name corresponds
to a key in the parent <code>FormGroup</code> or <code>FormArray</code>.
Accepts a name as a string or a number.
The name in the form of a string is useful for individual forms,
while the numerical form allows for form controls to be bound
to indices when iterating over controls in a <code>FormArray</code>.</p>
</div></div><aside class="tsd-sources"><p>Overrides FormControlName.name</p><ul><li>Defined in <a href="https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/forms/src/lib/directives/form-control-name.directive.ts#L47">packages/angular/forms/src/lib/directives/form-control-name.directive.ts:47</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="update" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">update</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">EventEmitter</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link"><a id="deprecated-2" class="tsd-anchor"></a>Deprecated<a href="#deprecated-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>as of v6</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.update</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3683</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="valueaccessor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">value<wbr/>Accessor</span><a href="#valueaccessor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">valueAccessor</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">ControlValueAccessor</span></div><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-2" class="tsd-anchor"></a>Description<a href="#description-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>The value accessor for the control</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.valueAccessor</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2989</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="ɵdir" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Static</code><span class="deprecated">ɵdir</span><a href="#ɵdir" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">"ɵdir"</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">unknown</span></div><aside class="tsd-sources"><p>Inherited from FormControlName.ɵdir</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3709</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="ɵfac" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Static</code><span class="deprecated">ɵfac</span><a href="#ɵfac" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">"ɵfac"</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">unknown</span></div><aside class="tsd-sources"><p>Inherited from FormControlName.ɵfac</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3708</li></ul></aside></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Accessors"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Accessors</h2></summary><section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="asyncvalidator" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">async<wbr/>Validator</span><a href="#asyncvalidator" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="asyncvalidator-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">asyncValidator</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">AsyncValidatorFn</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">AsyncValidatorFn</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-3" class="tsd-anchor"></a>Description<a href="#description-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Asynchronous validator function composed of all the asynchronous validators registered with
this directive.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.asyncValidator</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2904</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="dirty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">dirty</span><a href="#dirty" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="dirty-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">dirty</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-4" class="tsd-anchor"></a>Description<a href="#description-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether the control is dirty, meaning that the user has changed
the value in the UI. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.dirty</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2844</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="disabled" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">disabled</span><a href="#disabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="disabled-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">disabled</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-5" class="tsd-anchor"></a>Description<a href="#description-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether the control is disabled, meaning that the control is disabled
in the UI and is exempt from validation checks and excluded from aggregate
values of ancestor controls. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.disabled</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2821</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="enabled" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">enabled</span><a href="#enabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="enabled-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">enabled</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-6" class="tsd-anchor"></a>Description<a href="#description-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether the control is enabled, meaning that the control is included in ancestor
calculations of validity or value. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.enabled</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2827</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="errors" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">errors</span><a href="#errors" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="errors-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">errors</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">ValidationErrors</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">ValidationErrors</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-7" class="tsd-anchor"></a>Description<a href="#description-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports the control's validation errors. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.errors</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2832</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="formdirective" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">form<wbr/>Directive</span><a href="#formdirective" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="formdirective-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">formDirective</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-8" class="tsd-anchor"></a>Description<a href="#description-8" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>The top-level directive for this group if present, otherwise null.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.formDirective</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3706</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="invalid" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">invalid</span><a href="#invalid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="invalid-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">invalid</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-9" class="tsd-anchor"></a>Description<a href="#description-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether the control is invalid, meaning that an error exists in the input value.
If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.invalid</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2807</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="isdisabled" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">is<wbr/>Disabled</span><a href="#isdisabled" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="isdisabled-1"><span class="tsd-signature-keyword">set</span> <span class="tsd-kind-set-signature">isDisabled</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isDisabled</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span></div><div class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">isDisabled</span>: <span class="tsd-signature-type">boolean</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-10" class="tsd-anchor"></a>Description<a href="#description-10" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Triggers a warning in dev mode that this input should not be used with reactive forms.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.isDisabled</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3679</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="path" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">path</span><a href="#path" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="path-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">path</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-11" class="tsd-anchor"></a>Description<a href="#description-11" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Returns an array that represents the path from the top-level form to this control.
Each index is the string name of the control on that level.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.path</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:3701</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="pending" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">pending</span><a href="#pending" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="pending-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">pending</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-12" class="tsd-anchor"></a>Description<a href="#description-12" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether a control is pending, meaning that async validation is occurring and
errors are not yet available for the input value. If the control is not present, null is
returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.pending</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2814</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="pristine" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">pristine</span><a href="#pristine" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="pristine-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">pristine</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-13" class="tsd-anchor"></a>Description<a href="#description-13" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports whether the control is pristine, meaning that the user has not yet changed
the value in the UI. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.pristine</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2838</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="status" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">status</span><a href="#status" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="status-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">status</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">string</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">string</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-14" class="tsd-anchor"></a>Description<a href="#description-14" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Reports the validation status of the control. Possible values include:
'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.status</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2857</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="statuschanges" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">status<wbr/>Changes</span><a href="#statuschanges" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="statuschanges-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">statusChanges</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Observable</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Observable</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-15" class="tsd-anchor"></a>Description<a href="#description-15" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Returns a multicasting observable that emits a validation status whenever it is
calculated for the control. If the control is not present, null is returned.</p>
</div></div><aside class="tsd-sources"><p>Inherited from FormControlName.statusChanges</p><ul><li>Defined in node_modules/@angular/forms/index.d.ts:2869</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="touched" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="deprecated">touched</span><a href="#touched" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-is-inherited tsd-is-external"><div class="tsd-signature" id="touched-1"><span class="tsd-signature-keyword">get</span> <span class="tsd-kind-get-signature">touched</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-description"><h4 class="tsd-anchor-link"><a id="description-16" class="tsd-anchor"></a>Description<a href="#desc