Use reactive forms for login modal.

This commit is contained in:
Alexis Lahouze 2017-08-09 00:12:17 +02:00
parent 5f413f0cad
commit 49716421a1
3 changed files with 69 additions and 26 deletions

View File

@ -1,7 +1,8 @@
// vim: set tw=80 ts=2 sw=2 sts=2 : // vim: set tw=80 ts=2 sw=2 sts=2 :
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
@ -15,7 +16,8 @@ import { LoginModalComponent } from './loginModal.component';
@NgModule({ @NgModule({
imports: [ imports: [
HttpClientModule, HttpClientModule,
FormsModule, CommonModule,
ReactiveFormsModule,
NgLoggerModule, NgLoggerModule,
], ],
providers: [ providers: [

View File

@ -1,33 +1,70 @@
// vim: set tw=80 ts=2 sw=2 sts=2 : // vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Login } from './login'; import { Login } from './login';
@Component({ @Component({
selector: 'form[login-form]', selector: 'login-form',
exportAs: 'loginForm',
template: ` template: `
<div class="form-group"> <form novalidate (keyup.enter)="submit()" [formGroup]="form">
<label for="email" class="col-sm-4 control-label">Adresse email</label> <div class="form-group row">
<label for="email" class="col-sm-4 control-label">Adresse email</label>
<div class="col-sm-8"> <div class="col-sm-8"
<input type="text" class="form-control" id="email" [class.has-danger]="email.errors">
[(ngModel)]="login.email" placeholder="Nom d'utilisateur"> <input type="text" class="form-control" id="email"
formControlName="email" placeholder="Nom d'utilisateur">
<div class="help-block text-danger" *ngIf="email.errors">
<p *ngIf="email.errors.required">The email is required.</p>
</div>
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group row">
<label for="password" class="col-sm-4 control-label">Mot de passe</label> <label for="password" class="col-sm-4 control-label">Mot de passe</label>
<div class="col-sm-8"> <div class="col-sm-8"
<input type="password" class="form-control" id="password" [class.has-danger]="password.errors">
[(ngModel)]="login.password" placeholder="Mot de passe"> <input type="password" class="form-control" id="password"
formControlName="password" placeholder="Mot de passe">
<div class="help-block text-danger" *ngIf="password.errors">
<p *ngIf="password.errors.required">The email is required.</p>
</div>
</div>
</div> </div>
</div> </form>
` `
}) })
export class LoginFormComponent { export class LoginFormComponent {
public form: FormGroup;
@Input('login-form') private login: Login @Input('login-form') private login: Login
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
constructor(private formBuilder : FormBuilder) {}
ngOnInit() {
this.form = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
})
}
submit() {
if(this.form.valid) {
this.submitEventEmitter.emit();
}
}
get email() {
return this.form.get('email');
}
get password() {
return this.form.get('password');
}
} }

View File

@ -1,10 +1,10 @@
// vim: set tw=80 ts=2 sw=2 sts=2: // vim: set tw=80 ts=2 sw=2 sts=2:
import { Component, Input, ViewChild } from '@angular/core';
import { Component } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Login } from './login'; import { Login } from './login';
import { LoginFormComponent } from './loginForm.component';
@Component({ @Component({
selector: 'login-modal', selector: 'login-modal',
@ -14,13 +14,11 @@ import { Login } from './login';
</div> </div>
<div class="modal-body" id="modal-body"> <div class="modal-body" id="modal-body">
<form [(login-form)]="login" class="form-horizontal" <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
(ngSubmit)="submit()" #form="ngForm">
</form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()"> <button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
Login Login
</button> </button>
@ -31,14 +29,20 @@ import { Login } from './login';
` `
}) })
export class LoginModalComponent { export class LoginModalComponent {
private login: Login = new Login(); @ViewChild('loginForm') loginForm: LoginFormComponent;
constructor(private activeModal: NgbActiveModal) { constructor(private activeModal: NgbActiveModal) {
} }
submit(): void { submit(): void {
this.activeModal.close(this.login); let formModel = this.loginForm.form.value;
let login: Login = new Login();
login.email = formModel.email;
login.password = formModel.password;
this.activeModal.close(login);
} }
cancel(): void { cancel(): void {