Problem with labels

[aceleghin]

https://vimeo.com/239242187 As you can see in the video, when I I click the autocomplete option I set the other fields value, but the label don't go up and the text is under the labels. In the autocomplete I call this method: (onSelectionChange)="setCustomer(customer)" And the setCustomer method:

  setCustomer(customer: any): void {
    console.log(customer)
    this.selfCustomer = customer._links.self.href;
    this.selected.accountHolderName = customer.name;
    this.selected.email = customer.email;
    this.selected.accountHolderCountry = customer.countryName;
    this.selected.iban = customer.iban;
    this.selected.swift = customer.swift;
    this.loadCountry(customer._links.country.href);
  }

All my normal fields are something like:

<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">swift</label> <input class="form-control" id="swift" [(ngModel)]="selected.swift" name="swift"
         pattern="^([a-zA-Z]){4}([a-zA-Z]){2}([0-9a-zA-Z]){2}([0-9a-zA-Z]{3})?$">
   </div>
  </div>

But if you see the fields with autocomplete like country(Nazione) and customer(Intestatario) you can see the correct position of labels because in this field I don't use your labels but the standard mat-form-field with the placeholder autocomplete

I am using material 2.0.0.beta12 Angular 4.4.4

Do you have same issue? In this case you have a plan to fix it?

[chelaruc]

@lippomano Can you give me an archive for testing?

Best, Ciprian

[aceleghin]

@chelaruc I can send to you an email with the code because there are all of your theme inside

[chelaruc]

@lippomano my email address is ciprian@creative-tim.com

[drenda]

Are there news about this bug? Thanks

[ao1000]

@lippomano Hey try initializing bound variable in your constructor:

constructor() {
    this.selected.swift="";
}

[aceleghin]

In version 1.4.5 I can see labels in correct position, so problem solved

[aceleghin]

@chelaruc Probably not completely solved,

The first field is an autocomplete, when I select some option I set the field binded to the second field with some value (email) but the label stay down

[aceleghin]

@chelaruc can you help me with this problem

[drenda]

@chelaruc I've the same issue described here. We bought the theme and this issue is really annoying us from long time. Please give us a feedback as soon as possible.

Thanks

[chelaruc]

Hi guys, I'll take a look and I'll try to fix that for the next update.

[drenda]

Hi @chelaruc, some news? Thanks

[niesteszeck]

You need to add the 'is-empty' class to the 'form-group' when the formcomponent is not empty.

I have a method that manually adds some bootstrap classes to a formComponent:

Functions.ts

public static displayBootstrapClass(form: FormGroup, field: string) {
    return {
      'has-error': this.fieldHasError(form, field),
      'has-feedback': this.fieldHasError(form, field),
      'is-empty': this.fieldIsEmpty(form, field)
    };
  }

use it on my form component class

formComponent: FormGroup;
...
displayBootstrapClass(field: string) {
    return Functions.displayBootstrapClass(this.formComponent, field);
  }

and add this to a formcomponent:

<div class="form-group label-floating"
                     [ngClass]="displayBootstrapClass('mainContactInfo.phone')">
                  <label class="control-label">Phone</label>
                  <input class="form-control"
                         type="text"
                         formControlName="phone">
                </div>

@lippomano I'm working with reactive forms, but I think you should use it as:

<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">swift</label> 
    <input class="form-control" id="swift" [(ngModel)]="selected.swift" name="swift"
         pattern="^([a-zA-Z]){4}([a-zA-Z]){2}([0-9a-zA-Z]){2}([0-9a-zA-Z]{3})?$" displayBootstrapClass('selected.swift'>
   </div>
  </div>

but not sure, the thing is to add a 'is-empty' class to the form-group when is empty and remove it if you put some data on it.

[drenda]

Thanks @niesteszeck for the workaround. Do you think the problem can be solved directly in the theme? @chelaruc

[niesteszeck]

@drenda I'm not sure. As I have found, this is something between bootstrap, and angular. When learning about reactive forms, there are tips about adding the class 'has-error' to the form-groups with ngStyle or ngClass, so then I realize that angular2+ and bootstrap aren't full compatible/integrated/automatic/etc and I came with this workaround. Actually I use this method for custom components, so I can make it bootstrap classes ready. (see the ng2 wizard for some examples of using this method)

[aceleghin]

Resolved using mat-form-field like this:

<div class="col-md-4">
    <div class="form-group label-floating">
    <mat-form-field>
        <input type="text" matInput placeholder="{{'fine.detail.labels.customeraddress' | translate }}" id="customerAddress" [(ngModel)]="selected.offenderAddress"
        name="customerAddress" #customerAddress="ngModel">
    </mat-form-field>
     </div>
</div>

So without labels, and with a placeholder, the text is correct

[pierrebenazzibr]

Hi there,

Does anyone here could be able to fill a form from a service and the labels did recognize that some value was put into the input field ?

My user.component.html:

`

<div class="col-md-3"> 
    <div class="form-group label-floating">
        <label class="control-label">Username</label>
        <input type="text" class="form-control" name="username" 
               [(ngModel)]="email">
    </div>
</div>
<div class="col-md-4">
    <div class="form-group label-floating">
        <label class="control-label">Email</label>
        <input placeholder="Email" type="email" class="form-control" name="email" 
        [ngModel]="user?.email">
    </div>
</div>

`

My user.component.ts requesting data to REST

`

    this.userService.fetchUser(id)
        .subscribe(usuario => {
            this.email = usuario[0].email;
            this.user = usuario[0];
        });
    }

`

And the result:

[chelaruc]

@pierrebenazzibr have you tried the solution from @lippomano using mat-form-field?

[pierrebenazzibr]

Hi @chelaruc , i didn't. mat-form-field its a tag from Angular Material right? In my case, im just using Angular with the Bootstrap that came with the material-dashboard-pro template.

If anyone has any tips, please send me a comment!