Handling user input in MEAN Stack

In our previous section, we successfully implemented our login form. Previously, our form didn't do anything because we didn't handle the user input there. So, in this section, we will implement the functionality of our form and handle the user input. We will use the following steps to handle the user input:

1) In our login.component.html file where we implement our form, we still listen to the submit event and call the onlogin() method. But there, we need to manually submit a reference to the form object managed by angular. We will do this by adding a local reference and set this equal to ngForm, and then we pass the login form to the onlogin() method like as:

2) We also want to add local references to our inputs like email input so that we can use these in ngIf. We need to assign a value to the reference, and that will be ngModel. We need to add a name attribute and ngModel to the input in the first place.

3) Now, the input can get access to the underlying object controlled by angular, and we can use ngIf to check whether email input is valid. If it is invalid, it will show the error. We will also add the required email validator to the input.

4) In the same way, we will do everything for the password input field. We use the reference to check the password is valid or not.

Now, if we go back to our angular app, the validators will be attached, and if we entered something like a test, it would show please enter a valid email error.

5) Now, we will create the onlogin() method in the component.ts file, and here we will get form object as an argument, which is of type NgForm. In this method, we will simply console.log the form value to make sure that everything is working well.

Now, we save this and go back to our angular app. If we try to submit the form, we will get the values on the console.