Using Forms in MEAN Stack

In our previous section, we learned how to create model and how to use it in our application. Previously, we created posts using two-way binding and it was not necessarily wrong but angular makes it very easy to work with forms. Forms are very useful and we will use them in the following way:

1) We will go to our post-create.component.html file and add the form, i.e., normal html element. We wrap the <mat-form-field> and button with it in the following way:

So, there is no need to use two-way binding. We already include the form module, so when it detects the form element, it will automatically create a JavaScript object behind the scene, which represents this form. In the form, we can easily register inputs as controls and then store the values of these controls. Here we can easily add validation and submit the form to use the value of that form.

2) We get rid from the two-way binding by simply overriding [(ngModel)] = "enteredTitle" and [(ngModel)] = "enteredContent" with ngModel. The ngModel will register the input as a control to this. However the angular needs to know how to name this input, we add the name attribute and give any name which we want in the following way:

3) Now, when we click on the button, we don't need to call the onAddPost() function manually. We will set this button to be type of submit because we are using form. A button with type submit will submit the form. It will trigger a special event, i.e., submit event to which we can listen to and here we will execute our onAddPost() function in the following way:

4) Now, we need to get access to the values inside the form, and we will do this by using a local reference. So, we will add a reference to the form and give any name to it in the following way:

We passed the reference to the onAddPost() function. The #postForm will give us access to the html element object, and we have to assign the ngForm as its value. That is a directive, and angular implicitly attaches to the form element.

5) Now, we will go back to our post-create.component.ts The onAddPost() function will receive the form which actually is of type ngForm in the following way:

This NgForm holds a lot of information about the form, like whether it is valid or not.

6) This NgForm gives us access to the values of the form. We will access the value of the title and the content from the form in the following way:

Now, if we save it and run it on the browser, it will also accept the null value like as:

7) So, we need to add validation in the text input and the text area by simply adding the required validations in it. By adding this, angular will automatically detect this and update its form object to reflect whether it is valid or not and this will be added in the following way:

We also check whether the form is valid or not. If it is invalid, we simply add the return statement in the post-create.component.ts file in the following way:

Now, we save it and run it. It will look good like as:

8) Now, we can easily add the error messages by using the angular material. We will use the following syntax to show the error message:

Now, we use this syntax in our code, and for this, we need to get access to the input. We have two ways to get access to the input.

1. We can reach our postForm and call the getControl function in which we pass the name of the input as an argument like that:

2. We can add a local reference to that input and set this equal to ngModel. This will give us access to the data managed by that input and then we can use it to show the error message like as:

We will do the same thing for our text area.

We save it and run it on the ng serve. We will see the error message on the browser like this:

In our next section, we will learn about how to get posts from the post-create component to the post-list component.