How to set value in template-driven forms in Angular

In this tutorial, we will learn how to set value in template-driven forms in Angular. We will learn how to set the default or initial value to form controls, dynamically set values, reset the value of the form, etc. Learn how to set the value of individual FormControl or a FormGroup and nested FormGroup.

We have covered how to create template-driven forms in the angular tutorial. We will continue from there and in this tutorial, we will show you

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Template

The following is the app.component.html from the angular template-driven forms tutorial.

Before we set the default value, it is better to create a model class for the above form. Open the app.component.ts and add the following class


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Set value in template-driven forms

There are two ways you can set the value of the form elements

  • Two-way data binding
  • Use the template reference variable

Two-way data binding

The two-way data binding.is the recommended way to set the value in the template-driven forms.

The following code uses the [(ngModel)]="contact.firstname" to bind the firstname HTML element to the contact.firstname field in the component class. The advantageous here is that any changes made in the form are automatically propagated to the component class and changes made in component class are immediately shown in the form.

Set the default/initial value

To set the initial or default value all you need to populate the contact model in the ngOnInit method as shown below

Set the value individually or dynamically

Reset form

app.component.ts

app.component.html

Template reference variable

We have a #contactForm reference variable, which is an instance of ngForm.

We can get the reference to the #contactForm in the app.component.ts, using the viewchild

Once we have the reference, we can use the setValue method of the ngForm to set the initial value

Set the default or initial value

Note that we are using the setTimeout That is because the form controls are yet initialized when the OnInit is fired. We will get the following error message

There are no form controls registered with this group yet. If you’re using ngModel, you may want to check next tick (e.g. use setTimeout).

Set the value individually or dynamically

You can also set the value individually using the setValue method of the individual FormControl.

You will get the reference to the individual FormControl from the controls collection of the ngForm. Once you get the reference use the setValue on the FormControl instance to change the value.

For Example, this code will change the country to India

Call the changeCountry method from the Template.

Reset values

You can reset the form to empty value using the reset or resetForm method of the ngForm. These also resets the form status like dirty, valid, pristine & touched, etc

Set Default Value

You can invoke the setValue anytime to set the form back to the default value. This will set the entire form to the value held by the contact form.

patch value

You can make use of the patchValue to change the only few fields anytime. The control property of the ngForm returns the reference to the top level FormGroup. Then, you can make use of the patchValue method to change only firstname, lastname & email fields

Set value of nested FormGroup

You can update nested FormGroup by getting a reference to the nested FormGroup from the controls collection of ngForm.

The complete code.

app.component.ts

app.component.html

Angular Set Value in template driven forms

Summary

In this tutorial, we learned how to set the form values in the template-driven forms. We can either use the setValue of the ngForm directive or use the two-way data binding.

The list of Article on Angular Forms

  1. Angular Forms Tutorial: Fundamental & Concepts
  2. Template Driven Forms in Angular
  3. Set Value in Template Driven forms in Angular
  4. Reactive Forms in Angular
  5. FormBuilder in Reactive Forms
  6. SetValue & PatchValue in Angular
  7. StatusChanges in Angular Forms
  8. ValueChanges in Angular Forms
  9. FormControl
  10. FormGroup
  11. FormArray Example
  12. Build Dynamic or Nested Forms using FormArray
  13. Validations in Reactive Forms in Angular
  14. Custom Validator in Reactive Forms
  15. Passing Parameter to Custom Validator in Reactive Forms
  16. Inject Service into Custom Validator
  17. Validation in Template Driven Forms
  18. Custom Validator in Template Driven Forms

1 thought on “How to set value in template-driven forms in Angular”

  1. First, I’d like to say that I think these tutorials are awesome.

    BUT, when you change screens in mid-lesson to show another technique, it get CONFUSING.

    Here you take l from the previous lesson’s “app.component.html from the angular template-driven forms tutorial.”
    But you change it somehow and it’s not clear.
    I think i need to create a whole new app to work with this “how-to-set-value-in-template-driven-forms-in-angular”.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top