Label overlaps input on two way binding

Topic: Label overlaps input on two way binding

Er Ka free asked 6 years ago

Hello, I have a problem when implementing two way binding with ngModel. <divclass="md-form"> <inputtype="text"name="name"id="name"class="form-control" [(ngModel)]="item.name" mdbActive #name="ngModel" required > <label for="name"class="active">Name</label> </div> My problem is label overlaps input and does not automatically goes up. Please suggest.

Add comment

stgiaf pro answered 6 years ago

0 0 Best answer

Hello,

I have the same issue. When the model is filled with observable, then the label does not come up when the value is actuallt filled by the observable.

<strong>here is the typescript:</strong>
<div>
<div>import { UserService } from './../user.service';</div>
<div>import { User } from './../models/user.type';</div>
<div>import { Component, OnInit } from '@angular/core';</div>
<div>import { Router, ActivatedRoute } from '@angular/router';</div>
<div>@Component({</div>
<div>selector:'app-user-card',</div>
<div>templateUrl:'./user-card.component.html',</div>
<div>styleUrls: ['./user-card.component.scss']</div>
<div>})</div>
<div>export class UserCardComponent implements OnInit {</div>
<div>privateuser= {</div>
<div>id:0,</div>
<div>name:'',</div>
<div>department : {</div>
<div>id :0,</div>
<div></div>
<div>}</div>
<div>};</div>
<div>constructor(privateroute:ActivatedRoute, privaterouter:Router, privateuserService:UserService) {</div>
<div>route.params.subscribe ( p=> {</div>
<div>this.user.id=+p['id'] ||0;</div>
<div>})</div>
<div>}</div>
<div>ngOnInit() {</div>
<div>this.userService.GetUser(this.user.id).subscribe(</div>
<div>u=> {</div>
<div>this.user=u</div>
<div>console.log(this.user);</div>
<div>}</div>
<div>)</div>
<div>}</div>
<div>}</div>
</div>
<div></div>
<div><strong>and here is the html</strong></div>
<div></div>
<div>
<div>
<div><form></div>
<div><divclass="md-form mt-5"></div>
<div><i class="fa fa-user prefix gray-text"></i></div>
<div><input mdbActive type="text"id="name"name="name" [(ngModel)]="user.name"></div>
<div><label for="name">Your Name</label></div>
<div></div></div>
<div><div class="md-form"></div>
<div><i class="fa fa-bullseye prefix gray-text"></i></div>
<div><inputmdbActivetype="text"id="department"name="department" [(ngModel)]="user.department.name"></div>
<div><labelfor="name">Department</label></div>
<div></div></div>
<div></form></div>
</div>
</div>
<div></div>
<div></div>
<div>the result is as follows:</div>
<div>https://snag.gy/9rHJpo.jpg</div>
<div></div>
<div></div>
<div></div>
<div>Can you please advise?</div>
<div></div>

Please insert min. 20 characters.

Hello, I have the same issue. When the model is filled with observable, then the label does not come up when the value is actuallt filled by the observable. here is the typescript:

import { UserService } from './../user.service';

import { User } from './../models/user.type';

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute } from '@angular/router';

@Component({

selector:'app-user-card',

templateUrl:'./user-card.component.html',

styleUrls: ['./user-card.component.scss']

})

export class UserCardComponent implements OnInit {

privateuser= {

id:0,

name:'',

department : {

id :0,

}

};

constructor(privateroute:ActivatedRoute, privaterouter:Router, privateuserService:UserService) {

route.params.subscribe ( p=> {

this.user.id=+p['id'] ||0;

})

}

ngOnInit() {

this.userService.GetUser(this.user.id).subscribe(

u=> {

this.user=u

console.log(this.user);

}

)

}

and here is the html

<form>

<divclass="md-form mt-5">

</div>

<inputmdbActivetype="text"id="department"name="department" [(ngModel)]="user.department.name">

<labelfor="name">Department</label>

</div>

</form>

the result is as follows:

https://snag.gy/9rHJpo.jpg

Can you please advise?

Damian Gemza staff commented 6 years ago

Hello stgiaf, Please try to add class Active to your's label elements. This should fix your's problem. Please inform me how situation looks like. Best Regards, Damian

stgiaf pro commented 6 years ago

Hi Damian, Thanks for your answer. I added class="active" to the label element., but it seems in the Inspection (Developer Tools in Chrome) that the class is removed somehow and the issue still persists. Please not that the page is opened via RouterLink. If I manually refresh the page, it works.

Damian Gemza staff commented 6 years ago

Dear stgiaf, could you send me your's project without node_modules folder at d.gemza@mdbootstrap.com? I tried to reconstruct your's problem but for me everything is working fine. I created a second component, and filled it with form. In inputs i've putted data via ngModel. Made route from main component to second component via button. When second component is loaded, inputs are filled with data, and label goes up. https://screenshots.firefox.com/n0luPtBrub1Vqx7v/localhost Best Regards, Damian

stgiaf pro commented 6 years ago

Hi, Sent via weTransfer

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

If this is your html then you should start from cleaning it. Please check docs here: https://mdbootstrap.com/angular/components/inputs/ based on this you should create what you want. If you won't be capable of doing it then come back. For now that what you show me is impossible to work with.

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

Okay, one by one. First of all please tell me what you want to do? If it's a normal input then that what I gave you is enough to connect it. If you want to use mdb-ng-select then please provide me more information.

Er Ka free commented 6 years ago

This is what I have in html: <div> <div><div class="md-form"></div> <div><input type="text"name="name"id="name"class="form-control"</div> <div>[(ngModel)]="item.name" #name="ngModel" required [value]="item.name" mdbActive></div> <div><label for="name"class="active">Name</label></div> <div><div class="alert alert-danger" *ngIf="f.submitted && name.invalid">Name is required</div></div> <div></div></div> <div></div> </div> My model is: item with name attribute

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

I'm not sure how does your typescript part looks like so I will just give a working example.

In typescript:

myModel={name: 'test'};

In HTML:

<div class="md-form">
 <input type="text" name="name" id="name" class="form-control"
 [(ngModel)]="myModel" mdbActive value={{myModel.name}} required >
 <label for="name"class="active">Name</label>
</div>

With something in myModel.name the label goes up on page initialization.

Er Ka free commented 6 years ago

Name [(ngModel)]="myModel" => Doing like this I think not a correct way? Also binding does not work for mdb-ng-select component.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Er Ka

0Support score
3Questions 0Answers 0Snippets