Угловой 17 | Angular Material 17.3.1: проблема с событиями поля формы Angular Material (фокус) и (размытие)

Я пытался добавить эффекты (размытие) и (фокус) в поле ввода поля mat-form-field, но, похоже, с моей стороны они работают неправильно.

Вот пример кода, похожий на тот, что у меня есть:

HTML-файл

<form class = "example-form">
  <mat-form-field class = "example-full-width" appearance = "outline">
    <mat-label *ngIf = "isFieldFocused">Selected Food</mat-label>
    <input
      matInput
      placeholder = "Select Menu"
      (focus) = "click($event)"
      (blur) = "inActive($event)"
    />
  </mat-form-field>
</form>

машинописный файл

export class InputOverviewExample {
  isFieldFocused: boolean = false;

  click($event) {
    if ($event) {
      this.isFieldFocused = true;
    }
  }

  inActive() {
    this.isFieldFocused = $event ? true : false;
  }
}

В результате этого кода, когда я сосредоточился на поле mat-form, он не отображал mat-label. Может ли кто-нибудь подсказать, что может быть не так с моим подходом, или предложить альтернативное решение?

Я пытаюсь добиться первоначального отображения заполнителя. Затем, когда поле ввода сфокусировано, оно должно отобразить метку mat. Это возможно? Заранее спасибо!

html angular typescript angular-material angular17

02.05.2024 15:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

137

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Он работает нормально, проблема в том, что *ngIf портит анимацию, вместо этого используйте [hidden], который также скрывает значения, но не уничтожает их, и анимация, похоже, тоже работает!

<mat-label [hidden] = "!isFieldFocused">Selected Food</mat-label>

ПОЛНЫЙ КОД

ТС:

import { Component } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
import { tap, debounceTime } from 'rxjs/operators';
import { merge } from 'rxjs';
import { CommonModule } from '@angular/common';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrl: 'form-field-overview-example.css',
  standalone: true,
  imports: [
    MatFormFieldModule,
    CommonModule,
    MatInputModule,
    MatSelectModule,
    ReactiveFormsModule,
  ],
})
export class FormFieldOverviewExample {
  isFieldFocused: boolean = false;

  click($event: any) {
    console.info('focus');
    if ($event) {
      this.isFieldFocused = true;
    }
  }

  inActive($event: any) {
    this.isFieldFocused = false;
  }
}

HTML:

<form class = "example-form">
  <mat-form-field class = "example-full-width" appearance = "outline">
    <mat-label [hidden] = "!isFieldFocused">Selected Food</mat-label>
    <input
      matInput
      placeholder = "Select Menu"
      (focus) = "click($event)"
      (blur) = "inActive($event)"
    />
  </mat-form-field>
</form>

Демо-версия Stackblitz

@Kenbrnbe поставь зеленую галочку, если этот ответ поможет, спасибо!

— 09.05.2024 05:40

02.05.2024 15:26