Use reactive forms for login modal.

src/login/login.module.ts

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

src/login/loginForm.component.ts

@@ -1,33 +1,70 @@
 // 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';
 
 @Component({
-  selector: 'form[login-form]',
+  selector: 'login-form',
+  exportAs: 'loginForm',
   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 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>
+</form>
   `
 })
 
 export class LoginFormComponent {
+  public form: FormGroup;
   @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');
+  }
 }

src/login/loginModal.component.ts

@@ -1,10 +1,10 @@
 // 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 { Login } from './login';
+import { LoginFormComponent } from './loginForm.component';
 
 @Component({
   selector: 'login-modal',
@@ -14,13 +14,11 @@ import { Login } from './login';
 </div>
 
 <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 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
   </button>
 
@@ -31,14 +29,20 @@ import { Login } from './login';
   `
 })
 export class LoginModalComponent {
-  private login: Login = new Login();
+  @ViewChild('loginForm') loginForm: LoginFormComponent;
 
   constructor(private activeModal: NgbActiveModal) {
     
   }
 
   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 {