Label overlaps input on two way binding

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Label overlaps input on two way binding

Er Ka asked 7 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.  

Adrian Sawicki answered 7 years ago

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 commented 7 years ago

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

Adrian Sawicki answered 7 years ago

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 commented 7 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

Adrian Sawicki answered 7 years ago

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.  

stgiaf pro answered 7 years ago

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">
<i class="fa fa-user prefix gray-text"></i>
<input mdbActive type="text"id="name"name="name" [(ngModel)]="user.name">
<label for="name">Your Name</label>
</div>
<div class="md-form">
<i class="fa fa-bullseye prefix gray-text"></i>
<inputmdbActivetype="text"id="department"name="department" [(ngModel)]="user.department.name">
<labelfor="name">Department</label>
</div>
</form>
the result is as follows:
Can you please advise?

Damian Gemza staff commented 7 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 7 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 7 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 7 years ago

Hi, Sent via weTransfer
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Er Ka
0Support score
3Questions 0Answers
0Snippets likes 0Snippets