Mat Input Set Disabled

Menu items in Angular. Steps to implement Menu items in Angular applications. Step 1: Import Angular material Menu module. We can import material menu module (MatMenuModule) 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. A disabled input is of course also not editable, but it has a distinct appearance - greyed out and looks 'disabled'. A read-only input looks the same as a normal input, but is not editable. So you have to ask whether you want your controls actually disabled or just read-only. The mat-input, an Angular Directive, is used for input and elements to work under mat-form-field. Following input types can be used within mat-input. Color; date; datetime-local; email; month; number; password; search; tel; text; time; url; week; In this chapter, we will showcase the configuration required to use a mat-input.

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><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>

</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.

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

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

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

Mat Input Set Disabled Windows

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>.

Mat Input Set Disabled File

Example 6: Prefix & Suffix form field

Comments are closed.