Directives & Forms Capturing User Input SoftUni Team Angular Development SoftUni Team Technical Trainers Software University http://softuni.bg

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

Have a Question? sli.do #angular-js

Template-Driven Forms Capturing User Input

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

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

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 ) { } }

Template-Driven Forms Create a form component class import { Component } from '@angular/core'; 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!'); }

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>

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>

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">

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}}

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>

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

Attribute Directives DOM Manipulation

Attribute Directives import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @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;

Pipes Transforming data

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; }

JavaScript Web – Angular Fundamentals https://softuni.bg/courses/angular-2-fundamentals © Software University Foundation – http://softuni.org This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

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 – http://softuni.org This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

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