Scribd
Upload
4 views20 pages

03 Part1 TemplateDrivenForms

Uploaded by

robin.melis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views20 pages

03 Part1 TemplateDrivenForms

Uploaded by

robin.melis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Angular

Template-Driven Forms

1
Form object in Angular
HTML Typescript

{
<form>
value: {
<label for="name">Name</label>
name: 'Sofie',
<input type="text" id="name"
email: '[email protected]'
name="name" />
}
<label for="email">Email</label>
<input type="text" id="email"
valid: true
name="email" />
}
<button type="submit">Save</button>
</form>

Name Sofie

Email [email protected]

2
2 types of forms in Angular

• Template-Driven:
− form object is created by Angular based on the DOM
− handy to create forms quickly

• Reactive:
− structure of the form is defined in typeScript code
− link HTML and TypeScript manually
− more control options, more fine-tuning

3
Template-Driven form

app.module.ts

4
Select controls

• <form> element in HTML => Angular automatically


creates corresponding
JavaScript object
• No automatic detection of input fields!!
• Each form element you want to include in TypeScript
object => indicate by:
− ngModel (no brackets!)
− name field

5
Form submit
• No action or method in form tag because direct sending to backend not wanted!
(SPA) => use the JavaScript onSubmit event ngSubmit
• local reference #f => form can be accessed in HTML
• #f = "ngForm" => set ngForm directive to keep track of form value and validity
=> pass form information to TypeScript using f as argument

6
TypeScript: form object

7
Form submit (@Viewchild)

@ViewChild : link property "form" to template variabele "f"


Result is the same but form object now also available in TypeScript
without submit

8
Form validation: built-in validator directives

• Validation of controls using directives added to HTML


element:
− Checks properties of form and
controls (valid, invalid, status, …)
− Does not stop sending
− Dynamically adjusts classes of control
elements:
• ng-dirty: control content modified
• ng-touched: clicked in control
• ng-valid: valid data in control
• ng-invalid: invalid data in control

9
Form validation: built-in validator directives

• More directives: https://angular.io/api?type=directive

10
Form validation: disable submit button

11
Form validation: CSS classes

• add red border if field is invalid:


.ng-invalid { border: 1px solid red; }

• Note: form is invalid too => also gets red border:


input.ng-invalid { border: 1px solid red; }

• Now also red border before the user has done


anything:
input.ng-invalid.ng-touched {
border: 1px solid red;
}

12
Validation error messages

• Display or remove error paragraph using *ngIf:


− link needed with associated input element to check the validity
status
− use template variable with ngModel directive on input element:

13
Default values for form controls

• Default value can be entered via property binding with ngModel:

• Also 2-way binding on ngModel is still


possible as it was before!

14
Group form controls: ngModelGroup

• Large forms => value object becomes large and messy


• Group e.g. user data:
− enclosing div needed around form
controls that need to be grouped
− add ngModelGroup to that div
− name the group
− access to object via template
variable and ngModelGroup
directive for e.g. display/hide
error messages

15
Group form controls: ngModelGroup

New group (userData):


- extra control object
- data grouped in object
- dynamic css classes

16
Set value of input fields without two-way
binding
Overwrite complete form at once

17
Set value of input fields without two-way
binding

Overwrite only certain fields

Form reset: this.form.reset(); (resets also css classes)

18
Assignment
• Create a registration form with at least the following fields:
− name and first name => mandatory, grouped into fullName and name must have at
least 4 letters
− gender using radio buttons => mandatory
− date of birth => mandatory and must be a date
− email => mandatory and must be email
− payment method via dropdown (visa, mastercard or bancontact) with visa as default value

• Use CSS to clarify whether the data entered is right or wrong. Also display error
messages for any wrong input or wrong input group.

• Make sure that submission is possible only if the form is filled in correctly

• After submit, you show an overview of the values entered in your HTML page and
you reset the form (beware of the default value for the payment method!)

• Also provide a button to load a standard user

19
20

You might also like