Не получается сделать динамический label Angular?

Question

[Artem Mishurovskiy]

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

До этого был инпут комонент с 2 инпутами (в с помощью scss все что надо было сделал) но потом мне сказали нужен всего один инпут в комонентке так как он будет переиспользоватся много раз.

Но сейчас не получается сделать что б лейблы (как плейсхолдеры) были динамические и при фокусе инпута поднимались вверх

basic-input.component.html

<div class="section-input" [formGroup]="authForm">
    <input [formControl]="authControl" [id]="inputId"/>
    <label [for]="inputId">{{ label }}</label>
</div>

basic-input.component.ts

export class BasicInputComponent implements OnInit, ControlValueAccessor {

  @Input() authForm!: FormGroup;
  @Input() inputId = '';
  @Input() label = '';

  authControl = new FormControl();

  onChange(val: any) {
  }

  onTouch() {
  }

  constructor() { }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }

  writeValue(value: any) {
    this.authControl.setValue(value);
  }

  ngOnInit(): void {
    this.authControl.valueChanges.subscribe((val) => {
      this.onChange(val);
    })
  }
}

basic-input.component.scss

input {
  position: relative;
  height: 3vh;
  width: 19.54vh;
  border: 1px solid var(--input-color);
  border-radius: 2rem;
  background-color: var(--input-color-backgroung);
  margin-bottom: 1vh;
  font-family: $primary-fonts;
  font-size: 1vh;
  padding-left: 1.3vh;
  color: var(--input-color);

  &:focus {
    outline: none !important;
    border: 1px solid $primary-green;
  }

  &:focus,
  &:valid{
    color: var(--text-input-color)
  }
}


.section-input {
  position: relative;

  label {
    font-family: $primary-fonts;
    color: var(--input-color);
    font-size: 1vh;
    position: absolute;
    left: 3.3vh;
    top: 1.2vh;
  }

  //Тут должен отвечать за поднятие лейбла вверх
  input {
    &:focus + label,
    &:valid + label {
      background: var(--input-color-backgroung);
      color: $primary-green;
      width: 4vh;
      left: 4.5vh;
      top: -0.5vh;
    }

    &:focus + .input-password,
    &:valid + .input-password {
      width: 6vh;
    }
  }
}

auth-form.component.html

<form class="auth-form" [formGroup]="authForm" (ngSubmit)="onSubmit()">
<div class="input-container">
    <div class="section-input">
        <app-basic-input
                class="input-label"
                [authForm]="authForm"
                formControlName="email"
                inputId="email"
                label="Email"
                type="text">
        </app-basic-input>
    </div>
    <div class="section-input">
        <app-basic-input
                class="input-label"
                [authForm]="authForm"
                formControlName="password"
                inputId="password"
                label="Password"
                type="password">
        </app-basic-input>
    </div>
    <div>
        <app-basic-checkbox [authForm]="authForm"></app-basic-checkbox>
    </div>
</div>
    <div class="section-button">
        <app-basic-loading-button [authForm]="authForm"></app-basic-loading-button>
    </div>
    <div class="or">
        <hr>
        <span>OR</span>
        <hr>
    </div>
    <div class="section-google-button">
        <app-basic-google-button></app-basic-google-button>
    </div>
</form>

auth-form.component.scss

.section-button {
  padding-top: 1vh;
  display: flex;
  justify-content: center;
  margin-bottom: 0.8vh;
}

.section-google-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.or {
  width: 20vh;
  display: flex;
  color: var(--text-color);
  margin-bottom: 0.8vh;
  margin-left: 2.5vh;
  font-size: 1vh;
}

.or hr {
  width: 40%;
  height: 1px;
  background-color: var(--text-color);
  border: none;
  align-self: center;
}

#password {
  margin: 0;
}

Но они не динамические а всегда вверху

Answer 1

[Artem Mishurovskiy]

Добился такого , если убрать &:valid + label { то все получается поднимается в верх, но есть одно но , что если вводить какой то текст и переключится на пароль , лейбл спускается вниз опять, так как не валид

Исправил с помощью required

Все решил сам, спасибо