Module 10 - HTML Forms

Question 1

Reactive Forms Import

Answer 1

import { FormGroup, FormControl, Validators } from ‘@angular/forms’;

Question 2

Reactive Forms Configure

Answer 2

this.sheridanForm = new FormGroup({
‘idnumber’: new FormControl(null, Validators.required),
‘login’: new FormControl(null),
‘campus’: new FormControl(‘Davis’)
});

Question 3

Reactive Forms Use

Answer 3

<input matInput formControlName="idnumber">`

<input matInput formControlName="login">

```

<input></input>
~~~

<form [formGroup]="sheridanForm" (ngSubmit)="onSubmit()">

Question 4

Template Driven Forms Import

Answer 4

import { FormsModule } from ‘@angular/forms’;

Question 5

Template Driven Forms Configure

Answer 5

<input matInput id=”first” ngModel name=”first” required #first=”ngModel”>

Question 6

Template Driven Forms Use

Answer 6

<form #f=”ngForm” (ngSubmit)=onSubmit(f)”>

Question 7

What are the two approaches to working with forms in Angular, and when would you use each?

Answer 7

1. Template-driven forms: Used for simpler forms, where the structure is inferred from the HTML template.
2. Reactive forms: Used for more complex forms, where the form structure is defined in the TypeScript code.

Question 8

How do you handle form submission in a template-driven form using Angular?

Answer 8

Form submission is handled using the ngSubmit directive and binding it to a function in the component.

Example:
<form #f=”ngForm” (ngSubmit)=”onSubmit(f)”>

Question 9

What is the role of FormGroup in reactive forms, and how is it used?

Answer 9

FormGroup is used to group form controls in a reactive form, allowing for the management of the form’s overall state. It is defined in the component’s TypeScript file.

Example:
this.sheridanForm = new FormGroup({
‘idnumber’: new FormControl(null, Validators.required),
‘login’: new FormControl(null),
‘campus’: new FormControl(‘Davis’)
});