-
-
Save alevshunov/dc8c42e195e2be90fc689a94d2764934 to your computer and use it in GitHub Desktop.
Introduction to Angular 2 Forms - Template Driven, Model Driven Or In-Between
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="sample-app-content"> | |
<h1>Template-driven Form Example:</h1> | |
<form #f="ngForm" (ngSubmit)="onSubmitTemplateBased()"> | |
<p> | |
<label>First Name:</label> | |
<input type="text" | |
[(ngModel)]="user.firstName" required> | |
</p> | |
<p> | |
<label>Password:</label> | |
<input type="password" | |
[(ngModel)]="user.password" required> | |
</p> | |
<p> | |
<button type="submit" [disabled]="!f.valid">Submit</button> | |
</p> | |
</form> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: "template-driven-form", | |
templateUrl: 'template-driven-form.html' | |
}) | |
export class TemplateDrivenForm { | |
user: Object = {}; | |
onSubmitTemplateBased() { | |
console.log(this.user); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="sample-app-content"> | |
<h1>Model-based Form Example:</h1> | |
<form [formGroup]="form" (ngSubmit)="onSubmit()"> | |
<p> | |
<label>First Name:</label> | |
<input type="text" formControlName="firstName"> | |
</p> | |
<p> | |
<label>Password:</label> | |
<input type="password" formControlName="password"> | |
</p> | |
<p> | |
<button type="submit" [disabled]="!form.valid">Submit</button> | |
</p> | |
</form> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { FormGroup, FormControl, Validators, FormBuilder } | |
from '@angular/forms'; | |
@Component({ | |
selector: "model-driven-form", | |
templateUrl: 'model-driven-form.html' | |
}) | |
export class ModelDrivenForm { | |
form: FormGroup; | |
firstName = new FormControl("", Validators.required); | |
constructor(fb: FormBuilder) { | |
this.form = fb.group({ | |
"firstName": this.firstName, | |
"password":["", Validators.required] | |
}); | |
} | |
onSubmitModelBased() { | |
console.log("model-based form submitted"); | |
console.log(this.form); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.form.valueChanges | |
.map((value) => { | |
value.firstName = value.firstName.toUpperCase(); | |
return value; | |
}) | |
.filter((value) => this.form.valid) | |
.subscribe((value) => { | |
console.log("Model Driven Form valid value: vm = ",JSON.stringify(value)); | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p> | |
<label>First Name:</label> | |
<input type="text" [ngModel]="user.firstName" required> | |
</p> | |
<p> | |
<label>Password:</label> | |
<input type="password" [ngModel]="user.password" required> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
user = { | |
firstName: 'John', | |
password: 'test' | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p> | |
<label>First Name:</label> | |
<input type="text" name="firstName" required ngModel> | |
</p> | |
<p> | |
<label>Password:</label> | |
<input type="password" name="password" required ngModel> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {NgModule} from "@angular/core"; | |
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; | |
import {BrowserModule} from "@angular/platform-browser"; | |
import {FormsModule} from "@angular/forms"; | |
@Component({...}) | |
export class App { } | |
@NgModule({ | |
declarations: [App], | |
imports: [BrowserModule, FormsModule], | |
bootstrap: [App] | |
}) | |
export class AppModule {} | |
platformBrowserDynamic().bootstrapModule(AppModule); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {NgModule} from "@angular/core"; | |
import {ReactiveFormsModule} from "@angular/forms"; | |
@Component({...}) | |
export class App { } | |
@NgModule({ | |
declarations: [App], | |
imports: [BrowserModule, ReactiveFormsModule], | |
bootstrap: [App] | |
}) | |
export class AppModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p> | |
<button type="submit" [disabled]="!form.valid">Submit</button> | |
<button (click)="partialUpdate()">Partial Update</button> | |
<button (click)="fullUpdate()">Full Update</button> | |
<button (click)="reset()">Cancel</button> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fullUpdate() { | |
this.form.patchValue({firstName: 'Partial', password: 'monkey'}); | |
} | |
partialUpdate() { | |
this.form.patchValue({firstName: 'Partial'}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
reset() { | |
this.form.reset(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment