Scribd
Upload
3 views

03 Part1 TemplateDrivenForms

Uploaded by

robin.melis
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

03 Part1 TemplateDrivenForms

Uploaded by

robin.melis
Copyright
© © All Rights Reserved
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