Creating Forms In Angular Using Template Driven Forms


There are 2 ways to build form in Angular, you can use Reactive Forms or Template Driven Forms. Using Template driven forms, you can write templates in the Angular template syntax with the form-specific directives and techniques described in this page.

  1. Make sure the email address is not empty and gets validated for email.
  2. A dropdown that allows a user to choose different statuses - warm, hot, cold.

statuses = [‘Hot’, ‘Warm’, ‘Cold’]; 3. A password field that is not null.

Password is required
4. A submit button.

Display a warning message if the form is invalid and was touched. Display a warning label below each input field letting them know their input is invalid.

Form is not valid
After submitting the form, print the form input to the console. onSubmit() { console.log(this.myForm.value); } When setting up a form, we need to add the following code to the form tag:

To access the form values in the component code, we can use the ViewChild method that inherits from NgModel: @ViewChild(“myForm”) myForm: NgForm;

comments powered by Disqus