Separate account form from modal.

src/accounts/account.module.ts

@@ -13,6 +13,7 @@ import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
+import { AccountFormComponent } from './accountForm.component';
 
 @NgModule({
   imports: [
@@ -29,11 +30,13 @@ import { AccountEditModalComponent } from './accountEditModal.component';
   ],
   declarations: [
     AccountDeleteModalComponent,
-    AccountEditModalComponent
+    AccountEditModalComponent,
+    AccountFormComponent
   ],
   entryComponents: [
     AccountDeleteModalComponent,
-    AccountEditModalComponent
+    AccountEditModalComponent,
+    AccountFormComponent
   ]
 })
 export class AccountModule {}

src/accounts/accountEditModal.component.ts

@@ -1,5 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 import { Component, Input } from '@angular/core';
+import { NgForm } from '@angular/forms';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -13,57 +14,11 @@ import { Account } from './account';
 </div>
 
 <div class="modal-body" id="modal-body">
-  <form class="form-horizontal simple-form" novalidate (submit)="submit()" #accountForm="ngForm">
+  <account-form [(account)]="account" (onFormChanged)="accountForm = $event"></account-form>
-    <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>
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
+  <button class="btn btn-primary" [disabled]="!accountForm?.form.valid" (click)="submit()">
     Save
   </button>
 
@@ -74,7 +29,9 @@ import { Account } from './account';
   `
 })
 export class AccountEditModalComponent {
-  @Input() account: Account
+  @Input() account: Account;
+
+  accountForm: NgForm;
 
   constructor(public activeModal: NgbActiveModal) {}
 

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);
+  }
+}