Reactive Forms

Template driven forms

Reactive forms

Reactive another fancy buzz word

Angular Reactive Form

<form name="formValidation">
    <label>Username</label>
    <input type="text" name="username" ng-model="user.name" ng-minlength="6" 
        ng-maxlength="12" ng-pattern="/^\w+$/" required>
 
    <label>Password</label>
    <input type="text" name="userPassword" ng-model="user.password" 
        ng-minlength="6" ng-maxlength="12" required>
 
    <label>Email</label>
    <input type="email" name="userEmail" ng-model="userEmail" required>
</form>

Issue ?


<form name="formValidation" [formGroup]="usernameForm">
    <label>Username</label>
    <input type="text" name="username" formControl="userName">
 
    <label>Password</label>
    <input type="text" name="userPassword" formControl="userPassword">

    <label>Email</label>
    <input type="email" name="userEmail" formControl="userEmail">
</form>

Angular Reactive Form

  • Are...

    • Model Driven Design!

    • controlled via Component class not by HTML view

    • synchronously updated so you can do whatever you want

    • easily validated and tested

    •  reactive ==> data is immutable

  • Come from @angular/forms library

  • Is based on ReactiveFormsModule instead of FormModule

Sample code!

https://github.com/kfolwarczny/angular-reactive-forms

Whats better?

Angular Reactive Forms

By Krzysztof Folwarczny

Angular Reactive Forms

  • 309