Forms are the main ingredient in any interactive and dynamic application. Angular Material natively supports forms and form controls that can easily be integrated into our applications. In this section, we will learn how to put together forms using Angular Material.

Forms, in general, have evolved a lot in terms of UX/UI. Angular Material supports basic form field elements that involve text fields, textareas, drop-down select options, radio buttons, and checkbox elements. Angular Material also provides advanced form elements, such as autocomplete, the datepicker, slide toggles, and so on. We will learn how to add all of this to our form as we work through our hands-on examples.

Angular Material provides a lot of modules that are related to forms and form field elements, including the following listed modules:

•  MatFormFieldModule
• MatInputField
• MatRadioModule
• MatChipModule
• MatProgressBarModule
• MatSelectModule
• MatSlideModule
• MatSlideToggleModule
• MatListModule
• MatDatePickerModule
• MatAutocompleteModule
• MatCheckboxModule

As previously mentioned, we can import these individually, or all in one go, as we did in the previous section in our MaterialModule file. We have our modules imported in AppModule; we are good to start implementing the form fields into our form. We will wrap each of the input and textarea form elements in a <mat-form-field> wrapper directive. To implement the input textbox, we will make use of the matInput attribute, along with our HTML input tag:

<mat-form-field>
<input matInput placeholder="Enter Email Address" value="">
</mat-form-field>

That was very simple and straightforward, right? You bet it is. Now, similarly, we can easily add a textarea field to our form:

<mat-form-field class="example-full-width">
<textarea matInput placeholder="Enter your comments here"></textarea>
</mat-form-field>

Okay, so it wasn't rocket science to add the Input and Textarea form elements. Next, we are going to implement a radio button and checkbox field element:

 <mat-radio-group>
 <p>Select your Gender</p>
 <mat-radio-button>Male</mat-radio-button>
 <mat-radio-button>Female</mat-radio-button>
 </mat-radio-group>

To implement a radio button in our form, we will use the <mat-radio-button> directive. In most cases, we will also use multiple radio buttons in order to provide different options. That's where we will use a <mat-radio-group> wrapper directive. Similar to the radio button, Material provides a directive that we can easily use to integrate checkboxes into our application. We will make use of the <mat-checkbox> directive as follows:

<mat-checkbox>
    Agree to Terms and Conditions
</mat-checkbox>

The directive is provided by the MatCheckboxModule module, and provides a lot of properties that can we use to extend or process the data.

To implement the drop-down options in our form, we will need to use the HTML <select> and <option> tags. The Material library provides directives that we can easily use to extend the is capability in our form:

<mat-form-field>
Select City
<mat-select matNativeControl required>
 <mat-option value="newyork">New York City</mat-option>
 <mat-option value="london">London</mat-option>
 <mat-option value="bangalore">Bangalore</mat-option>
 <mat-option value="dallas">Dallas</mat-option>
</mat-select>
</mat-form-field>

In the preceding code, for using the <select> and <option> tags, we'll be using the <mat-select> and <mat-option> directives. We are making very good progress here. Let's keep the momentum going. The next form field element that we are going to implement is a slider component.

Sliders can be really helpful when the user wants to specify a start value and an end value. It improves the user's experience when they can just start scrolling through the range, and the data gets filtered based on the selected range. To add a slider to our form, we will need to add the <mat-slider> directive:

<mat-form-field>
Select Range
<mat-slider></mat-slider>
</mat-form-field>

That was very simple. The MatSliderModule API provides a lot of options to extend and use the directive in many useful ways. We can specify maximum and minimum ranges. We can set interval values, and much more. Talking about slider functionality in the UI, there is a component that we can use, called a slide toggle. We can implement a slide toggle using the <mat-slide-toggle> directive:

 <mat-slide-toggle>Save Preferences</mat-slide-toggle>

We made use of the <mat-slide-toggle> directive that was provided by the MatSlideToggleModule module. The API provides a lot of properties, such as dragChange, toggleChange, setting color or validation as required, and so on. 

Now that we have put together all of the preceding form field elements in our template file, let's run the app to see the output. Run the app using the ng serve command, and we should see the output shown in the following screenshot:

In the next section, we will learn about the buttons and indicator components that are provided by Angular Material.