Topic: Angular input label not working correctly

Daniel Braun priority asked 5 years ago


When you have an input with type number the label has no animation, It wont reduce the size and move up. Seems to work fine with text, email and password Any way around this?

<div class="md-form">
  <input mdbActive id="valve" type="number" class="form-control">
  <label for="valve" class="">Valve</label>
</div>

Adrian Sawicki free answered 5 years ago


Short instruction for a quick fix: 1. get inside typescript free folder 2. get inside input folder 3. open activeClass.ts file 4. exchange existing code with:

import {Directive, ElementRef, Output, HostListener, Renderer, AfterViewInit} from '@angular/core';

@Directive({
	selector: '[mdbActive]'
}) 

export class ActiveDirective implements AfterViewInit {
	public el: ElementRef = null;
	public elLabel: ElementRef = null;
	public elIcon: Element = null;

	constructor(el : ElementRef, public renderer: Renderer) {
		this.el = el;
    }

	@HostListener('focus', ['$event']) onClick() {
		this.initComponent();
	}

	@HostListener('blur', ['$event']) onBlur() {
		this.checkValue();
	}

	ngAfterViewInit() {
		this.initComponent();
		this.checkValue();
	}

	private initComponent(): void {
		// this.el.nativeElement = event.target;
		let inputId;
		let inputP;

		try {
			inputId = this.el.nativeElement.id;
		} catch(err) {}

		try {
			inputP = this.el.nativeElement.parentNode;
		} catch(err) {}

		this.elLabel = inputP.querySelector('label[for="'+ inputId +'"]') || inputP.querySelector('label');
		if(this.elLabel != null)
			this.renderer.setElementClass(this.elLabel, 'active', true);

		this.elIcon = inputP.querySelector('i') || false;

		if(this.elIcon) {
			this.renderer.setElementClass(this.elIcon, 'active', true);
		}
	}

	private checkValue(): void {
		let value = '';
		if(this.elLabel != null) {
			value = this.el.nativeElement.value || '';
			
			if(value === '') {
				this.renderer.setElementClass(this.elLabel, 'active', false);
				if(this.elIcon) {
					this.renderer.setElementClass(this.elIcon, 'active', false);
				}
			}
		}
	}
}
5. Should work now

Bartholomew Smyth free answered 5 years ago


Are you able to share a patch for existing version? We've paid for a PRO version and need quick fix for this ASAP

Edyta Dabrowska free answered 5 years ago


Hello, Thank you for noticing this! It will be fixed in next releases. Regards,

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags