accountant-ui/src/accounts/accountForm.component.ts

// 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 { 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">
        <input class="form-control"
          type="number" placeholder="Authorized overdraft"
          id="authorized-overdraft" name="authorized_overdraft"
          [(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
          required max="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.max">
          The authorized overdraft must be less than or equal to 0.
        </p>
      </div>
    </div>
  </div>
</form>
  `
})
export class AccountFormComponent implements  AfterViewChecked {
  @Input() account: Account;
  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
  @ViewChild('form') form: NgForm;

  constructor() {}

  ngAfterViewChecked() {
    this.onValid.emit(this.form.form.valid);
  }
}