I am setting up an Angular project to use the Angular Material framework. I am also using materializecss. When I try to create a form, I get a double control shown below...
Here is how I am creating this field:
<mat-form-field hintLabel="Max 10 characters" appearance="standard">
<input matInput #input (keyup)="applyFilter($event.target.value)" placeholder="Filter catalogs">
</mat-form-field>
Use either Angular Material MatInput and MatFormField or MaterializeCSS, but not both. They both add their own style to input, causing the problem you see.
Related
I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?
<mat-form-field>
<input matInput [(value)]="test">
</mat-form-field>
Assuming you're using Angular 8, you can use #ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with #ViewChild, you can use a template reference variable (e.g. #food).
Please have a look at the following StackBlitz
Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.
I wanted to implement a DateTimePicker using Angular Material.
I came to this example I went through all the steps.
In the site there were some live examples too. I was interested to implement the DateRange Example.
I found out that Angular Material doesn't use the md-input-container anymore, instead it uses mat-form-field.
I copied the code and a strange DateTimePicker is showing, not like in the site.
I think maybe angular doesn't understand this mdc-datetime-picker or it could be because I used mat-form-field.
Here is the code which I implemented just for testing:
<div layout="column">
<mat-form-field>
<label>Start Date/Time</label>
<input mdc-datetime-picker="" date="true" time="true" type="text"
placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input"
readonly="readonly" id="input_0">
<div></div>
</mat-form-field>
</div>
Any Idea on where the problem could be?
I am trying to use Mat-keyboard but the focus on input changes when I click the keyboard. Please see the image below -
displayed view of my keyboard
<form ngForm="myForm">
<mat-form-field>
<input matInput placeholder="Code" type="text" name="code">
</mat-form-field>
<mat-keyboard></mat-keyboard>
</form>
I want to achieve something this blog shows on angular 6:
Kindly visit to get more clarity
https://rawgit.com/GreenfieldVentures/angular-on-screen-keyboard/master/demo2.html
Thanks for your help!
You're not supposed to use <mat-keyboard> on it's own - it says so in the docs:
A component used to open as the default keyboard, matching material spec. This should only be used internally by the keyboard service.
Only use it as a directive:
<input matInput matKeyboard placeholder="Code" type="text" name="code">
You can read more on it on the docs site.
For Angular 5 + material library.
The core problem:
I have an input field that is supposed to accept a comma separated list of words. Some of these words could be from a pre-existing list and some could be completely new. So if the word happens to be from the pre-existing list, I want to allow autocomplete to complete it. I am not able to get this to happen. Any help would be greatly appreciated.
The separator could be something other than a comma.
I thought I saw a tutorial, mostly a work around somewhere that shows this. It wasn't exactly what I want to achieve. Unfortunately, I didn't save it. If anyone has this link, it would help.
This is my code as of now. It behaves more like a drop down, then like autocomplete
<mat-form-field>
<input matInput class="form-control" id="category" type="text"
formControlName="category"
[matAutocomplete]="auto" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let category of categories" [value]="category">{{category}}</mat-option>
</mat-autocomplete>
</mat-form-field>
I have mostly used the Material library, but I am not very satisfied documentation-wise. If mixing in an autocomplete component from a different library would work better, any pointers would be helpful
I have some components created for my angular application, and after upgrading my project to version 6 of Angular, I have received a message that worries me.
It looks like you're using ngModel on the same form field as
formControl.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and will be removed
in Angular v7.
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlDirective#use-with-ngmodel
This is due to my following component:
<input type="text" id="{{id}}" name="{{name}}" [formControl]="ctrl" [(ngModel)]="value" appPfMaskCpf="999.999.999-99" placeholder="{{placeholder}}"
class="form-control">
<div *ngIf="flagCpfInvalido && value.length > 0">
<small class="text-danger">
CPF inválido.
</small>
<br>
</div>
It is very simple, it receives an input and I check the value.
How can I remove the use of ngModel in this case?
You should not be using ngModel which is part of template-driven form inside a Reactive form.
In stead of setting values using ngModel you can set the value using formControlName: Ex:
<form [formGroup]="form">
<input formControlName="first">
</form>
Set this value in component: this.form.get('first').setValue('some value');
Or you can choose to silence the console warning for now:
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.
More details are available in documentation