libs/core/dynamic-form/text-area/src/text-area.component.ts
| selector | df-text-area |
| styleUrls | ./text-area.component.scss |
| templateUrl | ./text-area.component.html |
Properties |
|
constructor(formfieldDefaultOptions: FormfieldDefaultOptions)
|
||||||
|
Parameters :
|
| Public appearanceType |
Type : AppearanceType
|
Default value : 'auto'
|
| control |
Default value : input<UntypedFormControl>(new UntypedFormControl())
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:31
|
| Public floatLabelType |
Type : FloatLabelType
|
Default value : 'auto'
|
| labelAlwaysFloating |
Default value : false
|
| aclResource |
Type : string
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:56
|
| componentOrControlInitFinished |
Default value : new ReplaySubject<void>(1)
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:116
|
|
Additionally to the controlChanged EventEmitter a ReplaySubject is provided. In difference to the EventEmitter, this one always contains the last emitted value, which allows to check if a component was initialized after the initialization already happened. (An event will be gone at that point in time.) |
| config |
Type : InputSignal<C>
|
Default value : input.required<C>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:64
|
|
The configuration object for this formfield. Note that derived formfield components should extend the |
| Readonly controlChanged |
Default value : output<AbstractControl | undefined>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:101
|
|
Emits the Applications that need to further process this |
| Public deferSetupControl |
Default value : false
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:126
|
|
By default, the If this is set to true, the setup will not be run automatically. It is then
the derived component's responsibility to run call |
| formAclPath |
Default value : input<string>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:89
|
| Readonly formEvent |
Default value : output<DfEventPayload>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:108
|
|
Emits when events associated to the form control happen. The emitted object contains the data necessary to uniquely identify the event (field id and event type). It also contains the event data. |
| isRetailChannel |
Default value : input<boolean>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:91
|
| validationConfigs |
Default value : input<ValidationConfig[] | undefined>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:87
|
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { Component, Inject, input, OnInit, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import {
AppearanceType,
FloatLabelType,
FORMFIELD_DEFAULT_OPTIONS,
FormfieldDefaultOptions
} from '@aposin/ng-aquila/formfield';
import { DfTextAreaConfig } from './text-area.model';
@Component({
selector: 'df-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.scss'],
standalone: false
})
export class DfTextAreaComponent extends DfBaseComponent<DfTextAreaConfig> implements OnInit {
labelAlwaysFloating = false;
public appearanceType: AppearanceType = 'auto';
public floatLabelType: FloatLabelType = 'auto';
constructor(
@Optional()
@Inject(FORMFIELD_DEFAULT_OPTIONS)
private formfieldDefaultOptions: FormfieldDefaultOptions
) {
super();
}
override control = input<UntypedFormControl>(new UntypedFormControl());
override ngOnInit(): void {
super.ngOnInit();
this.setUpExpertMode();
/* If label is not floating, then we pass the label to the nx-formfield.
** TODO: exchange this logic when NDBX support that with this config is supported multiple lines
*/
this.labelAlwaysFloating = this.formfieldDefaultOptions?.nxFloatLabel === 'always';
this.emitFormControlEventOnValueChangesWithDebounce();
}
private setUpExpertMode() {
if (!this.isRetailChannel()) {
this.appearanceType = 'outline';
this.floatLabelType = 'always';
}
}
}
<ng-container *aclTag="aclResource">
<span nxCopytext class="own-label nx-font-weight-semibold" *ngIf="labelAlwaysFloating">
{{ config().label | interpolateFromStore | async }}
<span *ngIf="config().optionalLabel" class="nx-font-weight-regular">
({{ config().optionalLabel | interpolateFromStore | async }})</span
>
</span>
<nx-formfield
[label]="!labelAlwaysFloating ? (config().label | interpolateFromStore | async) : ''"
[optionalLabel]="
!labelAlwaysFloating ? (config().optionalLabel | interpolateFromStore | async) || '' : ''
"
[appearance]="appearanceType"
[floatLabel]="floatLabelType"
>
<textarea
nxInput
[id]="config().id"
[formControl]="control()"
[maxLength]="config().maxLength || 524288"
[rows]="config().rows || 2"
[cdkTextareaAutosize]="config().autosize ?? true"
[attr.data-testid]="config().testId"
(blur)="emitFormEvent('onBlurEvent', control().value)"
>
</textarea>
<span *ngIf="config().hint" nxFormfieldHint>{{
config().hint | interpolateFromStore | async
}}</span>
<df-info-icon
*ngIf="config().infoIcon"
nxFormfieldAppendix
[config]="config().infoIcon?.config"
[modalConfig]="config().infoIcon?.modalConfig"
></df-info-icon>
<taly-validation-errors
nxFormfieldError
[errorMessages]="validationConfigs()"
[controlErrors]="control().errors"
>
</taly-validation-errors>
<nx-message *ngIf="config().note" context="info" nxFormfieldNote>
<span>{{ config().note | interpolateFromStore | async }}</span>
</nx-message>
</nx-formfield>
</ng-container>
./text-area.component.scss
:host {
display: block;
}
/* Own label management.TODO: Remove when NDBX support multiple lines */
::ng-deep.own-label + * {
.nx-formfield__wrapper {
padding-top: 4px !important;
}
}