Improve Account form and edit modal.

src/accounts/account.module.ts

@@ -2,7 +2,7 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -24,7 +24,7 @@ import { AccountListState } from './account.states'
   imports: [
     HttpClientModule,
     CommonModule,
-    FormsModule,
+    ReactiveFormsModule,
     RouterModule.forChild([
       AccountListState
     ]),

src/accounts/accountEditModal.component.ts

@@ -1,10 +1,11 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Account } from './account';
+import { AccountFormComponent } from './accountForm.component';
 
 @Component({
   selector: 'account-edit-modal',
@@ -14,11 +15,11 @@ import { Account } from './account';
 </div>
 
 <div class="modal-body" id="modal-body">
-  <account-form [(account)]="account" (onValid)="valid=$event"></account-form>
+  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!valid" (click)="submit()">
+  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
     Save
   </button>
 
@@ -30,8 +31,7 @@ import { Account } from './account';
 })
 export class AccountEditModalComponent {
   @Input() account: Account;
-
-  valid: boolean = false;
+  @ViewChild('accountForm') accountForm: AccountFormComponent;
 
   constructor(private activeModal: NgbActiveModal) {}
 
@@ -44,7 +44,14 @@ export class AccountEditModalComponent {
   }
 
   submit(): void {
-    this.activeModal.close(this.account);
+    let formModel = this.accountForm.form.value;
+    let account = new Account();
+
+    account.id = this.account.id;
+    account.name = formModel.name;
+    account.authorized_overdraft = formModel.authorizedOverdraft;
+
+    this.activeModal.close(account);
   }
 
   cancel(): void {

src/accounts/accountForm.component.ts

@@ -1,56 +1,51 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
-import {
-  AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild
-} from '@angular/core';
-import { NgForm } from '@angular/forms';
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Logger } from '@nsalaun/ng-logger';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Account } from './account';
 
 @Component({
   selector: 'account-form',
+  exportAs: 'accountForm',
   template: `
-<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
-  <div class="form-group"
-    [ngClass]="{ 'has-error': name.errors }">
-    <label class="col-sm-4 control-label" for="name">Account name</label>
+<form class="form-horizontal simple-form" novalidate
+  (ngSubmit)="submit()" [formGroup]="form">
+  <div class="form-group row">
+    <label class="col-sm-5 control-label" [for]="name.key">Account name</label>
 
-    <div class="col-sm-8">
+    <div class="col-sm-7"
+      [ngClass]="{'has-danger': name.errors}">
       <input class="form-control"
-        type="text" placeholder="Account name"
-        id="name" name="name"
-        [(ngModel)]="account.name" #name="ngModel"
-        required>
+        id="name" formControlName="name"
+        placeholder="Account name">
 
-      <div class="help-block" *ngIf="name.errors && name.touched">
-        <p [hidden]="!name.errors.required">The account name is required.</p>
+      <div class="help-block text-danger" *ngIf="name.errors">
+        <p *ngIf="name.errors.required">The account name is required.</p>
       </div>
     </div>
   </div>
 
-  <div class="form-group"
-    [ngClass]="{ 'has-error': authorizedOverdraft.errors }">
-    <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
+  <div class="form-group row">
+    <label class="col-sm-5 control-label" for="authorized-overdraft">Authorized overdraft</label>
 
-    <div class="col-sm-8">
+    <div class="col-sm-7"
+      [ngClass]="{'has-danger': authorizedOverdraft.errors}">
       <div class="input-group">
         <input class="form-control"
-          type="number" placeholder="Authorized overdraft"
-          id="authorized-overdraft" name="authorized_overdraft"
-          [(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
-          required max="0">
+          id="authorized-overdraft" formControlName="authorizedOverdraft"
+          placeholder="Authorized overdraft">
 
         <div class="input-group-addon">.00€</div>
       </div>
 
-      <div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
-        <p [hidden]="!authorizedOverdraft.errors.required">
+      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
+        <p *ngIf="authorizedOverdraft.errors.required">
           The authorized overdraft is required.
         </p>
 
-        <p [hidden]="!authorizedOverdraft.errors.max">
+        <p *ngIf="authorizedOverdraft.errors.max">
           The authorized overdraft must be less than or equal to 0.
         </p>
       </div>
@@ -59,14 +54,34 @@ import { Account } from './account';
 </form>
   `
 })
-export class AccountFormComponent implements  AfterViewChecked {
+export class AccountFormComponent implements OnInit {
+  public form: FormGroup;
   @Input() account: Account;
-  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
-  @ViewChild('form') form: NgForm;
+  @Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
 
-  constructor() {}
+  constructor(private formBuilder: FormBuilder) {}
 
-  ngAfterViewChecked() {
-    this.onValid.emit(this.form.form.valid);
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+      authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
+    });
+
+    this.form.patchValue({
+      name: this.account.name,
+      authorizedOverdraft: this.account.authorized_overdraft
+    });
+  }
+
+  submit() {
+    this.submitEventEmitter.emit();
+  }
+
+  get name() {
+    return this.form.get('name');
+  }
+
+  get authorizedOverdraft() {
+    return this.form.get('authorizedOverdraft');
   }
 }