Migrating from tg-input-container (tg-light)

Replace the tg-input-container element with tg2-input-container, add [theme]="'tg-light'" to keep the tg-input-container look, replace tgTextInput with tg2Input, and import Tg2InputContainerComponent and Tg2InputDirective instead of TgInputContainerComponent and TgInputDirective.

tg2 fields don't integrate with tg-form-group or tg-validation-summary yet.

Selector

Before

Title (optional)

After

Title (optional)

<!-- Before -->
<tg-input-container label="Title">
    <input tgTextInput [(ngModel)]="title" />
</tg-input-container>

<!-- After -->
<tg2-input-container label="Title" [theme]="'tg-light'">
    <input tg2Input [(ngModel)]="title" />
</tg2-input-container>

Form bindings

ngModel, formControlName and formField bindings are unchanged — they go on the native element in both versions.

<!-- Before -->
<tg-input-container label="Email">
    <input tgTextInput type="email" formControlName="email" />
</tg-input-container>

<!-- After — bindings are unchanged -->
<tg2-input-container label="Email" [theme]="'tg-light'">
    <input tg2Input type="email" formControlName="email" />
</tg2-input-container>

Icons

The projected <tg-icon-left> / <tg-icon-right> slots are replaced by iconLeft / iconRight inputs.

Before

Search (optional)

After

Search (optional)

<!-- Before -->
<tg-input-container label="Search">
    <tg-icon-left name="search" role="presentation"></tg-icon-left>
    <input tgTextInput [(ngModel)]="query" />
</tg-input-container>

<!-- After -->
<tg2-input-container label="Search" iconLeft="search" [theme]="'tg-light'">
    <input tg2Input [(ngModel)]="query" />
</tg2-input-container>

Optional

Nothing to change. Like tg-input-container, tg2-input-container shows "(optional)" on every field that isn't required, worked out from the native required attribute or Validators.required. New in tg2-input-container: set showOptional="false" to hide it on a field that isn't really a form question, such as a search box.

Before

Title (optional)

After

Title (optional)

<!-- Before -->
<tg-input-container label="Title">
    <input tgTextInput [(ngModel)]="title" />
</tg-input-container>

<!-- After: unchanged, "(optional)" still comes from whether the field is required -->
<tg2-input-container label="Title" [theme]="'tg-light'">
    <input tg2Input [(ngModel)]="title" />
</tg2-input-container>

<!-- New in tg2-input-container: hide "(optional)" on a field that isn't a form question -->
<tg2-input-container label="Search" iconLeft="search" showOptional="false" [theme]="'tg-light'">
    <input tg2Input type="search" [(ngModel)]="query" />
</tg2-input-container>

Validation messages

tg-input-container read validation messages from tg-validation-messages, driven by the control's validators. tg2-input-container takes an explicit errorMessage input, shown once the control is touched and invalid.

<!-- Before (tg-validation-messages read the control's validators) -->
<tg-input-container label="Title">
    <input tgTextInput required [(ngModel)]="title" />
</tg-input-container>

<!-- After (an explicit errorMessage input) -->
<tg2-input-container label="Title" errorMessage="Title is required" [theme]="'tg-light'">
    <input tg2Input required [(ngModel)]="title" />
</tg2-input-container>

Characters remaining

tg-input-container shows the remaining characters count by default. tg2-input-container only shows it when you add showRemainingCharacters, and it still needs a maxlength on the native element.

Not supported

These inputs have no tg2-input-container equivalent:

inline
cancelable
size
showAllValidation
showValidation

<!-- Not supported in tg2-input-container -->
<tg-input-container
    label="Title"
    [inline]="true"
    [cancelable]="true"
    [size]="InputSizeEnum.large"
    [showAllValidation]="true"
    [showValidation]="false">
    <input tgTextInput [(ngModel)]="title" />
</tg-input-container>