1. Directives & Forms Capturing User Input SoftUni Team
Angular Development
SoftUni Team
Technical Trainers
Software University

2. Table of Contents Template-driven forms Attribute Directives Pipes
User input
Validation
Form specifics
Attribute Directives
Pipes

3. Have a Question?
sli.do #angular-js

4. Template-Driven Forms
Capturing User Input

5. Template-Driven Forms
Template-driven forms are the easiest you can use in Angular
Basically:
Create a model class
Component and form markup
Bind properties to the inputs
Add name attributes
Optionally, add CSS
Show validation messages
Handle submit

6. Template-Driven Forms
First you need to import the FormsModule
import { BrowserModule } from
import { FormsModule } from
import { NgModule } from
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent, ],
imports: [
BrowserModule,
FormsModule
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

7. Template-Driven Forms
Create a model class
export class Car {
constructor(
public make: string,
public model: string,
public engine: number,
public milleage?: number // this is optional property
) { } }

8. Template-Driven Forms
Create a form component class
import { Component } from
import { Car } from './car';
@Component({
selector: 'car-form',
templateUrl: './car-form.component.html' })
export class CarFormComponent {
engines = [1.6, 1.8, 2.0, 4.0];
model = new Car('BMW', '320i', this.engines[2]);
onSubmit() {
console.log('Submitted!'); }

9. Template-Driven Forms
Create the initial form template
<div class="container">
<h1>Car Form</h1>
<form>
<div class="form-group">
<label for="make">Name</label>
<input type="text" class="form-control" id="make" required>
</div> …
<button type="submit" class="btn btn-success">Submit</button>
</form>

10. Template-Driven Forms
You may use *ngFor to create dropdowns
<div class="form-group">
<label for="engine">Engine</label>
<select class="form-control" id="engine" required>
<option *ngFor="let engine of engines" [value]="engine">
{{engine}}
</option>
</select>
</div>

11. Template-Driven Forms
Add [(ngModel)] two-way data-binding and name attributes
Add ngForm to add additional Angular features
Add a "clear" button to see how the two-way binding works
<input
type="text"
class="form-control"
id="make"
name="make"
[(ngModel)]="model.make"
required />
<form #carForm="ngForm">

12. Template-Driven Forms
You may style the inputs based on Angular classes
Visited – ng-touched / ng-untouched
Changed – ng-dirty / ng-pristine
Valid – ng-valid / ng-invalid
<input
type="text"
class="form-control"
id="make"
required
[(ngModel)]="model.make" name="make"
#spy />
<br>TODO: remove this: {{spy.className}}

13. Template-Driven Forms
Adding additional validation messages
<input
type="text"
class="form-control"
id="make"
name="make"
[(ngModel)]="model.make"
required
#make="ngModel" />
<div [hidden]="make.valid || make.pristine" class="alert alert-danger">
Name is required!
</div>

14. Template-Driven Forms
Finally, to submit the form
You may disable the button too, if you want
More info
Validation -
Reactive forms -
<form (ngSubmit)="onSubmit()" #carForm="ngForm">
<button type="submit" [disabled]="!carForm.form.valid">Submit</button>

15. Attribute Directives
DOM Manipulation

16. Attribute Directives
import { Directive, ElementRef, HostListener, Input } from
@Directive({
selector: '[myHighlight]' })
export class HighlightDirective {
@Input('myHighlight') color: string;
constructor (private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter () {
this.highlight(this.color); }
@HostListener('mouseleave') onMouseLeave () {
this.highlight(null);
private highlight(color: string) {
this.el.nativeElement.style.color = color;

17. Pipes
Transforming data

18. Pipes import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'multiply' })
export class MultiplyPipe implements PipeTransform {
transform(value: number, times: string) {
const timesAsFloat = parseFloat(times);
const timesNumber = isNaN(timesAsFloat) ? 1 : timesAsFloat;
return value * timesNumber; }

19. JavaScript Web – Angular Fundamentals
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

20. License
This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" license
Attribution: this work may contain portions from
"End-to-end JavaScript Applications" course by Telerik Academy under CC-BY-NC-SA license
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

21. Free Trainings @ Software University
Software University Foundation – softuni.org
Software University – High-Quality Education, Profession and Job for Software Developers
softuni.bg
Software Facebook
facebook.com/SoftwareUniversity
Software YouTube
youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.