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 { 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 {}
|
||||
|
@ -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">
|
||||
<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>
|
||||
<account-form [(account)]="account" (onFormChanged)="accountForm = $event"></account-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) {}
|
||||
|
||||
|
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