Mat Input Set Disabled

Posted By admin On 16.08.21

Mat Input Set Disabled
Mat Input Set Disabled File
Mat Input Set Disabled Windows

The complete mat-select or native select control can be disabled by setting the disabled='true' as shown below: mat-select disabled='true'. Mat-select disabled='true'. Each option value can also be disabled by adding the disabled property Material Select with Checkboxes for Multiple Selection. It’s challenging to find resources that extend or modify the component styles and colors of the Angular Material Design framework. Most of the time, the overrides come from hacky solutions that provide a band-aid approach to solving a problem. 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.

Introduction

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:

<mat-chip-list>
<input matNativeControl>
<textarea matNativeControl>
<mat-select>
<select matNativeControl>

API reference for Angular Material form-field

Example 1: Simple Form

Form field appearance variants

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

S. No	Appearance variant names	Description
1.	Legacy appearance	It is the default style of the mat-form-field that is used to display the input-box with an underline.
2.	Standard appearance	It is a new version of the legacy appearance. It is more consistent with the fill and outline appearances.
3.	Fill appearance	In addition to the underline, it shows the <mat-form-field> with a filled background box.
4.	Outline appearance	It shows the <mat-form--field> with a border all the way around, not just an underline.

Example 2: Form-field appearance variants

import {Component} from '@angular/core'; @Component({ selector: 'form-field-appearance-example', templateUrl: 'form-field-appearance-example.html', }) export class FormFieldAppearanceExample {} <p> <mat-form-field appearance = 'legacy'> <mat-label> Legacy form field </mat-label> <input matInput placeholder = 'Placeholder'> <mat-icon matSuffix> sentiment_very_satisfied </mat-icon> <mat-hint> Hint </mat-hint> </mat-form-field> </p> <p> <mat-form-field appearance = 'standard'> <mat-label> Standard form field </mat-label> <input matInput placeholder = 'Placeholder'> <mat-icon matSuffix> sentiment_very_satisfied </mat-icon> <mat-hint> Hint </mat-hint> </mat-form-field> </p> <p> <mat-form-field appearance = 'fill'> <mat-label> Fill form field </mat-label> <input matInput placeholder = 'Placeholder'> <mat-icon matSuffix> sentiment_very_satisfied </mat-icon> <mat-hint> Hint </mat-hint> </mat-form-field> </p> <p> <mat-form-field appearance = ?outline?> <mat-label> Outline form field </mat-label> <input matInput placeholder = ?Placeholder?> <mat-icon matSuffix> sentiment_very_satisfied </mat-icon> <mat-hint> Hint </mat-hint> </mat-form-field> </p>

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.

Hint labels are specified in two ways.

By using the hintLabel property of the <mat-form-field>.
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.

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

Set the disabled attribute to the result of an expression and Angular will disable / enable the element for you as needed.

Disable an HTML Element – Example # 1

</div><table><tbody><tr><td><div><div>2</div><div>4</div><div>6</div><div>8</div><div>10</div></div></td><td><div><div><span>selector</span><span>:</span><span>'home'</span><span>,</span></div><div><span>}</span><span>)</span></div><div><span>count</span><span>:</span><span>number</span><span>=</span><span>0</span><span>;</span></div><div><span>}</span></div></div></td></tr></tbody></table><p>In example # 1, we have our component. There are two properties we are interested in: count and buttonDisabled. We will leverage these in our template.</p><h2>Disable an HTML Element – Example # 2</h2><img src='https://csharpcorner-mindcrackerinc.netdna-ssl.com/article/angular-material-part-one/Images/Angular Material14.png' alt='Disabled' title='Disabled' /><div><textarea wrap='soft' readonly='><!-- disable the button --> <button> Disable Button </button> <!-- enable the button --> <button> Enable Button </button> <!-- the target button --> <button disabled='disabled'> I've been clicked {{count}} times. </button>

Mat Input Set Disabled

</button>

Enable Button

</button>

In example # 2, we have our template. There are three buttons. The first two buttons toggle each other. That is to say, when the first button is clicked it is destroyed, and the second button is created. Conversely, when the second button is clicked, it is destroyed and the first button is created. All of this happens because each button has an ngIf attribute. That attribute is watching for the value of the buttonDisabled property. Also, each button has a click attribute. In each case, clicking the button updates the value of the buttonDisabled property.

Mat Input Set Disabled File

Important note: these two buttons are for demonstration purposes only. The focus of this article is the Angular [disabled] attribute.

Next, take a look at the third button. It has a disabled attribute. That attribute is set to toggle based on the buttonDisabled property. So when the buttonDisabled property is true, that third button is disabled. And when the buttonDisabled property is false, the third button is not disabled.

Video Example Code

Mat Input Set Disabled Windows

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-disabled-attribute