File
|
disabled
|
Type : boolean
|
|
Required : true
|
|
|
|
hasValidation
|
Type : boolean
|
|
Required : true
|
|
|
|
invalid
|
Type : boolean
|
|
Required : true
|
|
|
import { NgClass } from '@angular/common';
import { Component, Input } from '@angular/core';
@Component({
selector: 'mat-dynamic-form-input-wrapper',
templateUrl: './dynamic-form-input-wrapper.component.html',
imports: [NgClass],
})
export class MatDynamicFormInputWrapperComponent {
@Input() label: string;
@Input() inputId: string;
@Input() required: boolean;
@Input({ required: true }) disabled: boolean;
@Input({ required: true }) invalid: boolean;
@Input({ required: true }) hasValidation: boolean;
@Input() errorMessage: boolean;
}
<div
class="mat-mdc-form-field mat-mdc-form-field-wrapper"
[ngClass]="{ 'mdc-text-field--disabled': disabled, 'mdc-text-field--invalid': invalid, 'no-validation': !hasValidation }"
>
<div class="mat-mdc-form-field-input-wrapper">
@if (label) {
<label class="mat-mdc-form-field-input-label mat-mdc-floating-label mdc-floating-label" [for]="inputId"
>{{ label }}
@if (required) {
<span>*</span>
}
</label>
}
<ng-content />
</div>
@if (hasValidation) {
<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align">
@if (invalid) {
<div class="mat-mdc-form-field-error-wrapper">
<div class="mat-mdc-form-field-error mat-mdc-form-field-bottom-align">{{ errorMessage }}</div>
</div>
}
</div>
}
</div>