In angular material,we use a directive <md-input-container> to contain inputs. As the directive name implies,It is a container which contain input components like label,input and textarea as a child element. Using this container we can do error handling. For error handling there is a directive given:ng-message. Using this directive we can display any type of error message as required.
So to understand that how to use md-input-container directive we will see an example. In the example I have used label,input,textarea and datepicker control. As it is an EventInviteeForm so fields are added accordingly what is required. Here I have used <md-content> directive as it is a container which handles the scroll on webpage according to the page height so its better to have all the elements under md-content.
Here are some attributes which can be used with input components to have better UI and functionality in input controls.
md-maxlength defines the maximum length of an input control. We can set any limit to number of characters we want to insert in our input control. It will show a counter near the input which tells how many number of characters have been written and how many are left.
we can set aria-label to our input control,if no label will be defined then this attribute will log a warning message in the console.
Placeholder is the same as we use in html. It will hold a value for the input control if the label is not present to make rich input control.
As the name implies,it will not allowed input controls to grow automatically. When it is used,input control like textarea will not grow automatically. We have to define limit to grow that input control.