Angular Material Input

Angular Material Input: Angular Material provides md-input-container directory which allows us to create form data. You can add validation and display error messages using for input fields. Here in this tutorial we are going to explain how you can create form elements using this directory. You can also use our online editor to edit and run the code online.

Angular Material Input Example

Let us first create a very basic example-

Form Validation With Error Messages

Here is a simple form with validation and error messages –

If you run the above example it will produce output something like this –

ng-message – displays the error message when the validation is failed and it automatically hides error message when the input field has valid data.

Attributes

Following Attributes are available –

• md-maxlength(number): Maximum number of characters allowed in input field. The counter will be displayed under the input field.
• aria-label(string):
  Aria-label is required when no label is present. A warning message is logged in the console if Area-label is not found.
• 
  placeholder(string):
  This is used to add placeholder. If area-label is not present then placeholder text will be copied to area-label.
• 
  md-no-autogrow(boolean):
  If this is available the text-area will not grow automatically.
• 
  md-no-asterisk(boolean):
  This is used when you do not want to append asterisk to input field.
• 
  md-no-resize(boolean):
  This is used to diable the textarea resize handle.
• 
  max-rows(number):
  This is used to add maximum number of rows for a textarea.
• 
  md-detect-hidden(boolean):
  If this is added to input then textareas will be sized properly when revealed after being hidden. This is off by default.