This draft deletes the entire topic.
Examples
-
import { Component } from '@angular/core'; import { Router , ROUTER_DIRECTIVES} from '@angular/router'; import { NgForm } from '@angular/forms'; @Component({ selector: 'login', template: ` <h2>Login</h2> <form #f="ngForm" (ngSubmit)="login(f.value,f.valid)" novalidate> <div> <label>Username</label> <input type="text" [(ngModel)]="username" placeholder="enter username" required> </div> <div> <label>Password</label> <input type="text" name="password" [(ngModel)]="password" placeholder="enter password" required> </div> <input class="btn-primary" type="submit" value="Login"> </form>` }) export class LoginComponent{ constructor(private router : Router){ } login (formValue: any, valid: boolean){ console.log(formValue); if(valid){ console.log(valid); } } }
I am downvoting this example because it is...
Remarks
Angular 2 allow to access the ngForm instance by creating a local template variable. Angular 2 exposes directive instances like ngForm by specifying exportAs property of the directive metadata. Now, the advantage here is without much coding you can access the ngForm instance and use it to access submitted values or to check if all the fields are valid using properties (valid, submitted, value etc).
#f = ngForm (creates local template instance "f")
ngForm emits the event "ngSubmit" when it's submitted (Check @Output documentation for more details of event emitter)
(ngSubmit)= "login(f.value,f.submitted)"
"ngModel" creates a Form Control in combination with input "name" attribute.
<input type="text" [(ngModel)]="username" placeholder="enter username" required>
When form is submitted, f.value has the JSON object representing the submitted values.
{ username: 'Sachin', password: 'Welcome1' }
Angular 2 : Template Driven Forms
import { Component } from '@angular/core';
import { Router , ROUTER_DIRECTIVES} from '@angular/router';
import { NgForm } from '@angular/forms';
@Component({
selector: 'login',
template: `
<h2>Login</h2>
<form #f="ngForm" (ngSubmit)="login(f.value,f.valid)" novalidate>
<div>
<label>Username</label>
<input type="text" [(ngModel)]="username" placeholder="enter username" required>
</div>
<div>
<label>Password</label>
<input type="text" name="password" [(ngModel)]="password" placeholder="enter password" required>
</div>
<input class="btn-primary" type="submit" value="Login">
</form>`
})
export class LoginComponent{
constructor(private router : Router){ }
login (formValue: any, valid: boolean){
console.log(formValue);
if(valid){
console.log(valid);
}
}
}
Sign up or log in
Save edit as a guest
Join Stack Overflow
We recognize you from another Stack Exchange Network site!
Join and Save Draft