Блог

Главная - Вопросы по программированию - как добавить дополнительный текст к типу

как добавить дополнительный текст к типу

#angular

Вопрос:

Ниже у меня есть поле ввода, я хочу добавить текст sf рядом с вводом, так что, например, пользовательский ввод 1500, тогда он будет отображаться в текстовом поле 1500 sf .. но когда я отправляю SF, он не должен быть включен.

Любая идея будет оценена, спасибо.

#html-код

  <mat-form-field appearance="fill" class="w-32per">
                  <mat-label [ngClass]="{'alter-text-color':dealDispositionFormFields.isSubtenantTakingFullSpace === 'No'}">Subtenant Area (*)</mat-label>                  <input 
                    name = "subTenantArea" 
                    class="alter-text-color"
                    matInput
                    [(ngModel)]="dealDispositionFormFields.subTenantArea"       
                    [disabled]="dealDispositionFormFields.isSubtenantTakingFullSpace === 'Yes'"              
                    [required]="isExistingDeal">
                </mat-form-field>

введите описание изображения здесь

Ответ №1:

Вы должны изучить matSuffix . Это то, что я бы использовал для вашего сценария:

 <mat-form-field appearance="fill" class="w-32per">
  <mat-label [ngClass]="{'alter-text-color':dealDispositionFormFields.isSubtenantTakingFullSpace === 'No'}">Subtenant Area (*)</mat-label>
  <input name = "subTenantArea" 
         class="alter-text-color"
         matInput
         [(ngModel)]="dealDispositionFormFields.subTenantArea"
         [disabled]="dealDispositionFormFields.isSubtenantTakingFullSpace === 'Yes'"              
          [required]="isExistingDeal">
  <span matSuffix>sf</span>
</mat-form-field>

Комментарии:

1. Привет, почему sf находится слишком далеко от ввода? imgur.com/a/H84qx1l

2. Предполагается, что он должен быть в конце ввода, потому что это суффикс. Если вы хотите, чтобы он был ближе к левой стороне, попробуйте заменить matSuffix на matPrefix вместо, но это останется перед текстом, а не после.

3. как изменить его так, чтобы он был таким же на скриншоте, сэр? возможно ли это с помощью css

Метки: