Separate account form from modal.
This commit is contained in:
parent
adfd61fac9
commit
60aa6310bb
@ -13,6 +13,7 @@ import { AccountService } from './account.service';
|
|||||||
import { AccountBalancesService } from './accountBalances.service';
|
import { AccountBalancesService } from './accountBalances.service';
|
||||||
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
||||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||||
|
import { AccountFormComponent } from './accountForm.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@ -29,11 +30,13 @@ import { AccountEditModalComponent } from './accountEditModal.component';
|
|||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
AccountDeleteModalComponent,
|
AccountDeleteModalComponent,
|
||||||
AccountEditModalComponent
|
AccountEditModalComponent,
|
||||||
|
AccountFormComponent
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
AccountDeleteModalComponent,
|
AccountDeleteModalComponent,
|
||||||
AccountEditModalComponent
|
AccountEditModalComponent,
|
||||||
|
AccountFormComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AccountModule {}
|
export class AccountModule {}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input } from '@angular/core';
|
||||||
|
import { NgForm } from '@angular/forms';
|
||||||
|
|
||||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
|
||||||
@ -13,57 +14,11 @@ import { Account } from './account';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body" id="modal-body">
|
<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>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<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
|
Save
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -74,7 +29,9 @@ import { Account } from './account';
|
|||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class AccountEditModalComponent {
|
export class AccountEditModalComponent {
|
||||||
@Input() account: Account
|
@Input() account: Account;
|
||||||
|
|
||||||
|
accountForm: NgForm;
|
||||||
|
|
||||||
constructor(public activeModal: NgbActiveModal) {}
|
constructor(public activeModal: NgbActiveModal) {}
|
||||||
|
|
||||||
|
72
src/accounts/accountForm.component.ts
Normal file
72
src/accounts/accountForm.component.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user