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