Angular Material: how to set floatPlaceholder to never - html

Library: Angular Material (material2)
I would like to use the MdInputContainer's floatPlaceholder directive, so that the placeholder/hint never floats.
I don't see where it states the values it expects in the documentation:
#Input() floatPlaceholder: Whether the placeholder should always float, never float or float as the user types.
taken from: https://material.angular.io/components/input/api
<md-input-container [floatPlaceholder]="false">
<input type="text" mdInput placeholder="Search...">
</md-input-container>
I've tried false and "never" for the values as my best guesses, but neither prevents the placeholder from floating above the input.

You can set the floatPlaceholder input to: auto, always, never.
<md-input-container floatPlaceholder="never">
<input type="text"
mdInput
placeholder="Search...">
</md-input-container>
Update (Angular Material 6):
Now you have to use floatLabel:
<mat-form-field floatLabel="never">
<input matInput placeholder="Search...">
</mat-form-field>
Stackblitz Demo

You can also set this as a global setting in your AppModule like this:
Import the MAT_FORM_FIELD_DEFAULT_OPTIONS into your AppModule
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '#angular/material';
Pass it into the providers array of the module (additional code omitted with ...):
#NgModule({
imports: [...],
declarations: [...],
providers: [
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { float: 'never' } },
...
],
bootstrap: [...]
})
export class AppModule {}

For Angular 10 this works fine
import { NgModule } from '#angular/core';
import { MatAutocompleteModule } from '#angular/material/autocomplete';
#NgModule({
exports: [
MatAutocompleteModule,
// other modules needed
],
providers: [
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } },
],
declarations: [],
})
export class MaterialModule { }

Related

Cannot bind to 'matDatePicker' since isn't property of 'input', despite importing everything

I'm attempting to integrate a very basic date picker into my Angular project. The Angular CLI version is 6.2.9.
My HTML was taken straight from the Angular docs.
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
This returned an error saying
Can't bind to 'matDatepicker' since it isn't a known property of 'input'
After a quick search I found this question that told me to include some imports, which I did adding the following to the very top of my TS code.
import { MatNativeDateModule, MatDatepickerModule, } from '#angular/material';
#NgModule({
declarations: [
HomeComponent
],
imports: [
MatDatepickerModule,
MatNativeDateModule,
FormsModule,
ReactiveFormsModule
]
})
Despite this, I'm continuing to receive the exact same error message. Have I forgotten something else in the TS file? Do I have to include something after my 'export class'? Or is this type of action just not compatible with my Angular version? Any help is appreciated.
Have you tried changing material modules imports to this?
import {MaterialModule} from '#angular/material';
#NgModule({
imports: [
MdDatepickerModule,
MdNativeDateModule,
FormsModule,
ReactiveFormsModule
]
})
Refer this article for more details this
Because it says MaterialModule Removed. please use separate module instead.
Hope this'll help.

No provider for ControlContainer Error while using Angular Material Forms with Angular 6

I have already written an application using Angular 6 and I am adding Angular material into it.
Reactive forms approach is used in existing application
I have a login module which has below declaration.
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path:'login',component:LoginComponent}
]),
ReactiveFormsModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule
],
declarations: [LoginComponent]
})
export class LoginModule { }
The Login component has below template - login.component.html
<form>
<mat-form-field>
<input matInput placeholder="UserName">
</mat-form-field>
</form>
The AppModule imports the LoginModule into it.
I am getting below console error when login.html is rendered
compiler.js:1016 Uncaught Error: Template parse errors:
No provider for ControlContainer ("<section>
[ERROR ->]<form>
<mat-form-field>
<input matInput placeholder="UserName">
This error is resolved when I add FormsModule in LoginModule as below
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path:'login',component:LoginComponent}
]),
FormsModule, //forms module added
ReactiveFormsModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule
],
declarations: [LoginComponent]
})
export class LoginModule { }
Does FormsModule needed to be added for Angular material forms to work ?
But what if we are using reactive forms as the case with my sample application ?

Ionic4 Angular attribute directive having no effect

I have created a simple directive that works in an angular demo app according to the guide here.
The appHighlight directive works in Angular, but does nothing when applied in a new blank Ionic-v4 app.
Here are the steps I took to create this ionic project:
ionic start directiveTest blank --type=angular
ionic generate directive Highlight
imported ElementRef from ‘#angular/core’ and injected into
HighlightDirective constructor as shown below.
set ElementRef.nativeElement.style.backgroundColor = ‘yellow’ inside
the directive constructor
checked to make sure HighlightDirective was declared in
app.module.ts added ‘appHighlight’ to tag in home.page.html
Is this expected to work as shown, or am I missing something? Thanks!
highlight.directive.ts:
import { Directive, ElementRef } from '#angular/core';
#Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
app.module.ts:
#NgModule({
declarations: [AppComponent, HighlightDirective],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html:
<ion-content padding>
The world is your oyster.
<p appHighlight> test </p>
</ion-content>

Angular 4 *ngIf not showing error message for custom validation

I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular here.
Here is my code set up:
<div class='col-xs-12 col-sm-5'>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input class="form-control input-md"
#firstName="ngModel"
required name="firstName"
minlength="4" appForbiddenName="bob"
type="text"
placeholder="First Name"
[(ngModel)]="personal.firstName">
<div style="font-size: 12px; color: red;"
*ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
<div *ngIf="firstName.errors.required">*Required</div>
<div *ngIf="firstName.errors.minlength">Min length is 4</div>
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
</div>
</div>
</div>
In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
/* App Root */
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
/* Feature Components */
import { PersonalComponent } from './personal/personal.component';
import { IncomeComponent } from './income/income.component';
import { BankComponent } from './bank/bank.component';
import { AddressComponent } from './address/address.component';
import { ResultComponent } from './result/result.component';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
/* Shared Service */
import { FormDataService } from './data/formData.service';
import { WorkflowService } from './workflow/workflow.service';
import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';
/* Animation Modules */
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule
],
providers: [
{ provide: FormDataService, useClass: FormDataService },
{ provide: WorkflowService, useClass: WorkflowService }
],
declarations: [
AppComponent, NavbarComponent, PersonalComponent, IncomeComponent,
BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm following the live example from angular.io's documentation and if I type the forbidden name "bob" in the input field, it's coming up as an error but the error message won't display.
screenshot
Other error messages, such as 'required' or 'min length is 4' are showing but not the error message for forbidden name. The input field is being highlighted red like I've styled to show it's an invalid input, but no error message for the custom validator appForbiddenName (or any other custom validation I've added).
I'm new to both Angular and Typescript, so excuse the potentially amateurish question. Someone please help, it seems trivial but I'm not sure everything Angular's doing.
Also, to build this angular app, I followed the tutorial here.
Your error is in this line:
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
It should only be firstName.errors.forbiddenName
<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>
And also when you are using *ngIf or *ngalert module , import the common module from the angular. This will save from any further errors regarding this.
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
..,
..,
CommonModule
],
declarations: []

Angular 2 Component property shadowing

I have declared one property called foobar in the Angular 2 Foobar component:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-foobar',
templateUrl: './foobar.component.html',
styleUrls: ['./foobar.component.css']
})
export class FoobarComponent implements OnInit {
foobar= 'test';
ngOnInit() {
}
}
then in foobar.component.html file I output that property like this:
<div>
<br>
{{foobar}}
</div>
and it outputs word test, however, once I have added element with id foobar:
<div>
<br>
{{foobar}}
<br>
<input type="text" #foobar>
</div>
I'm no longer able to get value from the component and it outputs [object HTMLInputElement], because it was shadowed by the input field id.
How can I get value from the component without changing component property name and input field id?
You can try this
<div>
<br>
{{ this['foobar'] }}
<br>
<input type="text" #foobar>
</div>
but it is not documented and may break in future releases
Try with two-way databinding:
<div>
<br />
{{foobar}}
<br />
<input type="text" [(ngModel)]="foobar">
</div>`
To accomplish that you need the module: #angular/forms in your package.json and don´t forget to import it to your app-module:
import {FormsModule} from "#angular/forms";
#NgModule({
declarations: [ ... ],
imports: [
FormsModule,
...
]
...
})
export class AppModule{ ... }