Angular Basics-9

Welcome to part-9 of Angular Basics series. In this part , we will learn about forms in Angular. Angular provide us with two approaches to create forms. They are Template Driven and Reactive approach.

We will look into Template Driven approach in this post. The starting point can be taken from here.

We have a simple html form in the project, which we are going to change into Angular template driven form.

One thing to make sure is to have a FormsModule imported in our app.module.ts file, which is generally automatically done by Angular CLI.

Now, to convert the html form to an Angular template driven form, we need to add ngModel and name to it. This ngModel is different then the directive, which uses [()].

We also have to use the ngSubmit on the form. We are using a reference to target the ngForm here.

Next, in the app.component.ts file we are importing the NgForm and console logging the form.

Now, in localhost if we enter anything we will get it in the console. Notice that we have access to various properties here.

We can also use another way to pass data to the typescript file. We need to only call the onSubmit() without any parameters in app.component.html file.

Next in app.component.ts file we will use the ViewChild to get access to the reference f and assign it to a signupForm. After that we can get the values entered by the user.

Now, in localhost we will still have access to NgForm.

Now, we will learn to add validators in our app. We are making the username required and the email required and to be a valid email in app.component.html file.

Now, if we submit the wrong fields, like not a valid email. We will get the valid property as false.

In app.component.html file, we will first make the button enabled only if the form is valid. Next, we are referencing the email and showing a text, if email is not valid and is touched.

We also need to add CSS in app.component.css to show a red border.

Now, localhost will show red borders and Submit button will be disabled if the form is not valid.

Now, we will look into the example to using one way binding and two way binding in ngModel. First in the select we are using one-way binding to set the option to a default value.

Next, we have created a textarea and used two way binding to show instantly the user’s input.

Now in app.component.ts file just add those variables.

Now, in localhost it will work as desired.

We will now learn to use radio buttons. First add a new variable genders in app.component.ts file.

genders = ['male', 'female'];

After that we will be adding the radio button in app.component.html file. Everything is as earlier, expect that we have a value binding for gender.

Our radio button is now working properly in localhost.

Now, we will add functionality to Suggest an Username button. First add a click listener in app.component.html file.

Now, we will update the function suggestUserName in app.component.ts file. We are using patchValue provided by Angular to update the username value.

Now, in localhost on click of the Suggest an Username button, we will get the Superuser text.

Now, we will output the data entered by the user in form. We will add a user object in app.component.ts and also a variable submitted.

In the onSumbit, we are assigning the entered value to this user. We are also making the submitted to true and also resetting the form.

Now, in app.component.html file, we are showing the entered data if the submitted is true.

Now, our data is been shown properly once we submit it. This completes our post. You can get the code for the same from this github repo.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

590 Followers

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger