Introduction

1. Mat Input Set Disabled File
2. Mat Input Set Disabled Password
3. Mat Input Set Disabled Windows 10
4. Mat Input Set Disabled

The selector of MatSlideToggle is mat-slide-toggle. To create a slide toggle we use mat-slide-toggle element. MatSlideToggle provides input properties such as ariaLabel, ariaLabelledby, checked, color, disableRipple, disabled, id, labelPosition, name, required. This tutorial will give you simple example of angular material mat-form-field input example. You will learn angular material input box example. I’m going to show you about angular material mat-form-field reactive form. If you have question about angular material textbox example then i will give simple example with solution. Set up global Angular Material typography styles? Set up browser animations for Angular Material? Example 1: Basic Material Radio Button. Here, we will create very simple example. First we need to import MatRadioModule for mat-radio-button material design. So let's update app.module.ts, app.component.ts and app.component.html.

The <mat-form-field> is a component that is used to wrap multiple MAT components and implement common text field styles of the form-field such as hint message, underlines, and floating label.

These five MAT components are designed to work inside the form-field:

1. <mat-chip-list>
2. <input matNativeControl>
3. <textarea matNativeControl>
4. <mat-select>
5. <select matNativeControl>

API reference for Angular Material form-field

Disabled select. Add the mdc-select-disabled class to the mdc-select element, set the aria-disabled attribute on the mdc-selectselected-text element to be 'true', and set the disabled attribute any hidden input element. To disable the text field, add the disabled attribute to the element and add the mdc-text-field-disabled class to the mdc-text-field element. Text field with helper text The helper text provides supplemental information and/or validation messages to users.

Example 1: Simple Form

Form field appearance variants

The <mat-form-field> supports four different appearance forms that can be set through appearance input.

Example 2: Form-field appearance variants

Hint labels

Hint labels are additional descriptive-text that appears below the underline of the <mat-form-field>. It contains two hint labels: first start-aligned and the other end-aligned.

Mat Input Set Disabled File

Hint labels are specified in two ways.

1. By using the hintLabel property of the <mat-form-field>.
2. By adding the <mat-hint> module in the form field.

When multiple hints are added to the same page, the probability of error on that page increases.

Example 3: Form field with hints

Error messages

The error message can be shown under the form field by adding the <mat-error> module. The errors are initially hidden that is displayed on the invalid entry after the user interacts with the element, or the original form is submitted.

If the form field can contain more than one error condition, it is up to the consumer to display which messages first. It can be done with ngSwitch, ngIf, or CSS. If required, multiple error messages may be displayed at the same time, but <mat-form-field> only has enough space to display one error message at a time.

Example 4: Error message form

Theming and Font-Size

The <mat-form-field> has a color-palette that can be set the color of the form fields. It sets the color of the form field based on your application's theme colors.

The <mat-form-field> derives its font-size from its parent element. It can be overridden in a clear shape using CSS.

Example 5: Form field theming and font-size

HTML Code

CSS Code:

Prefix & suffix

The input of the text field can be included before and after the input tag, as a suffix or prefix. The text field view will be included within the container that wraps the form control according to the content specification.

Mat Input Set Disabled Password

If you want to add a text-prefix element to the text field, you must use the matPrefix directive inside the <mat-form-field>. Similarly, if you want to add a text-suffix element to the text field, you must use the matSuffix directive inside the <mat-form-field>.

Example 6: Prefix & Suffix form field

To implement date picker in Angular we can use angular material datepicker module called MatDatepickerModule.

Date picker is a component which allow users to choose a date from the calendar pop up or enter a date through text input.

MatDatepickerModule made up of several material components and directives that work together.

Datepicker Angular

Steps to create datepicker in Angular applications.

step 1: Import Angular material datepicker module

We should add MatDatepickerModule in our components ts file or app.module.ts file or some common material module which can be used across the application as explained in angular material tutorial.

step 2: Use matDatepicker selector along with input element

After importing MatDatepickerModule in our component file, use mat-datepicker,mat-datepicker-toggle and input elements together to display datepicker calender pop up.

mat-datepicker example

Now we will implement a basic date picker in angular using mat-datepicker element.

1. Add a template reference variable mat-datepicker element.
   
2. Connect mat-datepicker to input element via [matDatepicker] property.
3. Finally add date picker toggle button to display or hide calender popup by using mat-datepicker-toggle element.

Change the icon of mat-datepicker-toggle

To change the icon of datepicker toggle button use mat-icon along with matDatepickerToggleIcon property inside mat-datepicker-toggle element.

mat-datepicker Start View

By default when we open calender pop up it will show the current month calender. Instead of that if we want to set the view to current year we can use startView property of mat-datepicker.

Allowed values of startView are

1. month (default)
2. year
3. multi-year

mat-datepicker startView year

To set the start view to current year (which displays months in the year)set the startView property to year.

mat-datepicker startView multi-year

Similary we can set the calender pop up view to multi-year to display 24 years.

mat-datepicker startAt

By default calender pop up shows the month or year containing today’s date.

To change this behavior we can use startAt property of mat-datepicker.

For example to show calender pop up to display previous year i.e., 2019 we can assign startDate variable to January 2019 as show below.

Angular Material datepicker validations

mat-datepicker contains three additional properties to add validation to date picker input.

1. min : we can set the minimum date
2. max : we can set the maximum date
3. matDatepickerFilter : we can add custom validation on each date.

mat-datepicker min max date validations

Now we will learn how to enforce min max validations to mat-datepicker input using an example.

In our component ts file we can set the minimum and maximum dates and bind them in min and max properties.

All of the dates before 1990 and past 2020 are unselectable and he cannot go beyond this date range.

But user can able to type the dates manually in mat-datepicker input element.

In that case input element will have validation errors.

To handle this case we can add min and max date validation messages.

mat-datepicker min max date validations with error messages

When a user manually type a date beyond min max range. The input element will have following validation errors.

1. matDatepickerMin
2. matDatepickerMax

We can use this two errors to display validation error messages on mat-datepicker input element.

I am using mat-error element to display error messages.

In the above example, I have created a date variable and bind it to datepicker input element using ngModel.

Added a template reference variable #resultPickerModel to ngModel to track error messages.

And also if we enter invalid date, the input element will contain matDatepickerParse error.

matDatepickerFilter validation.

If we want to add custom validation on each and every date we can use matDatepickerFilter property.

For example if we want to disable selection of saturday and sunday as they are weekends we can make use of matDatepickerFilter property.

matDatepickerFilter property accepts a function of DateType => boolean (where DateType is the type of date used by the datepicker).

If the funtion returns true then the date is valid and if it is false then it is not.

We will go through an example to understand it futher.

And in component ts file I have added a dateFilter function to check for saturday and sunday.

And if the user manually types the date which is a weekend, the input element will have matDatepickerFilter validation error.

I am using that error to display error message.

mat-datepicker date format

To change mat-datepicker date format in we have to write our own DateAdapter.

Steps to format the dates in mat-datepicker input

1. Create a custom date adapter (PickDateAdapter) by extending NativeDateAdapter.
2. Import formatDate from @angular/common to change the datepicker input format.
3. Add custom date picker formats (PICK_FORMATS).
4. Finally add the custom date adapter and custom date formats to the provider array of component to overwrite default DateAdapter and MAT_DATE_FORMATS.

You have to import NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS from angular material.

The below date picker example display the date in dd-MMM-yyyy format. i.e., 08-Jan-2020.

And similarly the format dd-MM-yyyy displays the date as 07-01-2020.

For example to display date along with day use format EEEE, MMMM d, y.i.e.,Monday, January 6, 2020

Go through the below article for the complete list of date formats.

mat-datepicker dateClass

dateClass property used to add classes to the date picker input.

It’s very helpful in case of if you want to apply styles to the dates in calender pop up.

A real world example would be highlight holidays in a calender.

dateClass accepts a function which will be called for each and every dates in the calendar and will apply any classes that are returned from the method.

And the funtion can return object as well. i.e., we can return an ngClass object.

Highlighting dates in mat-datepicker calender.

Mat Input Set Disabled Windows 10

We will highlight the weekends in calender pop-up using dateClass.

Steps to highlight dates in calender

1. Define a dateClass function which will return class name in component ts file.
2. Add dateClass propery to the mat-datepicker element and bind it to the funtion created above.
3. Define styles for the dateClass in component styles.css file.
4. Add encapsulation: ViewEncapsulation.None to the component declaration.

Mat Input Set Disabled

The below examples highlight the weekends in calender pop up i.e., saturday and sunday.

And add styles to the highlight-dates class in datepicker.component.scss file.

Disable mat-datepicker

We can disable the datepicker by adding disabled property to the input element.

Disable mat-datepicker-toggle

To disable only datepicker toggle we can add dispabled property to the mat-datepicker-toggle element.

In this case user can only enter date by manually typing.

Disable mat-datepicker input

When we add disabled property on input element <mat-datepicker> and <mat-datepicker-toggle> will inherit the disabled state, that’s why both datepicker and datepicker-toggle are disabled.

But we can override disabled property at datepicker and toggle elements.

So now we cannot enter date manually but can be selected through calender pop up.

mat-datepicker disable manual typing in input element

The above approach can be used to disable typing in date picker input. But the selected date will be in gray color.

So to disable typing in datepicker, add readonly propery to input element.

mat-datepicker touch Ui mode in mobile devices

Normally in datepicker calender popup will be displayed under the input element.

But in mobile devices we don’t have much space and we need bigger real estate to click and select dates.

mat-datepicker comes up with touchUi property, if we set to true calendar opens in a large touch friendly UI dialog.

Change mat-datepicker color

To change the color of mat-datepicker we can make use of color property which accepts themepalette (primary, accent, or warn).

Common errors while implementing mat-datepicker

Now we will go through the most common errors while adding mat-datepicker in our angular applications.

Error: ‘mat-form-field’ is not a known element

To fix mat-form-field is not a known element error import MatInputModule along with MatDatepickerModule other wise you will get following error.

‘mat-form-field’ is not a knownelement:1. If ‘mat-form-field’ is an Angular component, then verify that it is part of this module.2. If ‘mat-form-field’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ ofthis component to suppress this message.

Error: MatDatepicker: No provider found for DateAdapter

To fix No provider found for DateAdapter error we have to import MatNativeDateModule or MatMomentDateModule in our app.module.ts file or common material module.

Oe we can add our own custom date adapter as explained above.

Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.

Error: A MatDatepicker can only be associated with a single input.

If more than one matInput elements connected to same mat-datepicker we will get A MatDatepicker can only be associated with a single inputerror.

In the above code two input elements are connrected to same matDatepicker element i.e., pickerSame.

Error: Attempted to open an MatDatepicker with no associated input

See the below code

In the above code, I am connecting input element to pickerdate which does not exists in component file. In that case we will get following error.

Error: Attempted to open an MatDatepicker with no associated input.