Separate account form from modal.

src/accounts/accountForm.component.ts

@@ -0,0 +1,72 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+import { Component, ViewChild, AfterViewChecked, Input, Output, EventEmitter } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Account } from './account';
+
+@Component({
+  selector: 'account-form',
+  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>
+
+    <div class="col-sm-8">
+      <input class="form-control"
+        type="text" placeholder="Account name"
+        id="name" name="name"
+        [(ngModel)]="account.name" #name="ngModel"
+        required>
+
+      <div class="help-block" *ngIf="name.errors && name.touched">
+        <p [hidden]="!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="col-sm-8">
+      <div class="input-group">
+        <div class="input-group-addon">-</div>
+
+        <input class="form-control"
+          type="number" placeholder="Authorized overdraft"
+          id="authorized-overdraft" name="authorized_overdraft"
+          [(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
+          required min="0">
+
+        <div class="input-group-addon">.00€</div>
+      </div>
+
+      <div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
+        <p [hidden]="!authorizedOverdraft.errors.required">
+          The authorized overdraft is required.
+        </p>
+
+        <p [hidden]="!authorizedOverdraft.errors.min">
+          The authorized overdraft must be equal or greater than 0.
+        </p>
+      </div>
+    </div>
+  </div>
+</form>
+  `
+})
+export class AccountFormComponent implements  AfterViewChecked {
+  @Input() account: Account;
+  @Output() onFormChanged: EventEmitter<NgForm> = new EventEmitter<NgForm>();
+  @ViewChild('form') form: NgForm;
+
+  constructor() {}
+
+  ngAfterViewChecked() {
+    this.onFormChanged.emit(this.form);
+  }
+}