Improve Account form and edit modal.
This commit is contained in:
parent
58f1abce21
commit
e68db9f54a
@ -2,7 +2,7 @@
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@ -24,7 +24,7 @@ import { AccountListState } from './account.states'
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule.forChild([
|
||||
AccountListState
|
||||
]),
|
||||
|
@ -1,10 +1,11 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
import { NgForm } from '@angular/forms';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
import { AccountFormComponent } from './accountForm.component';
|
||||
|
||||
@Component({
|
||||
selector: 'account-edit-modal',
|
||||
@ -14,11 +15,11 @@ import { Account } from './account';
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<account-form [(account)]="account" (onValid)="valid=$event"></account-form>
|
||||
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" [disabled]="!valid" (click)="submit()">
|
||||
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
||||
Save
|
||||
</button>
|
||||
|
||||
@ -30,8 +31,7 @@ import { Account } from './account';
|
||||
})
|
||||
export class AccountEditModalComponent {
|
||||
@Input() account: Account;
|
||||
|
||||
valid: boolean = false;
|
||||
@ViewChild('accountForm') accountForm: AccountFormComponent;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {}
|
||||
|
||||
@ -44,7 +44,14 @@ export class AccountEditModalComponent {
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.account);
|
||||
let formModel = this.accountForm.form.value;
|
||||
let account = new Account();
|
||||
|
||||
account.id = this.account.id;
|
||||
account.name = formModel.name;
|
||||
account.authorized_overdraft = formModel.authorizedOverdraft;
|
||||
|
||||
this.activeModal.close(account);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
|
@ -1,56 +1,51 @@
|
||||
// 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 { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
|
||||
@Component({
|
||||
selector: 'account-form',
|
||||
exportAs: 'accountForm',
|
||||
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>
|
||||
<form class="form-horizontal simple-form" novalidate
|
||||
(ngSubmit)="submit()" [formGroup]="form">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 control-label" [for]="name.key">Account name</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-7"
|
||||
[ngClass]="{'has-danger': name.errors}">
|
||||
<input class="form-control"
|
||||
type="text" placeholder="Account name"
|
||||
id="name" name="name"
|
||||
[(ngModel)]="account.name" #name="ngModel"
|
||||
required>
|
||||
id="name" formControlName="name"
|
||||
placeholder="Account name">
|
||||
|
||||
<div class="help-block" *ngIf="name.errors && name.touched">
|
||||
<p [hidden]="!name.errors.required">The account name is required.</p>
|
||||
<div class="help-block text-danger" *ngIf="name.errors">
|
||||
<p *ngIf="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="form-group row">
|
||||
<label class="col-sm-5 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-7"
|
||||
[ngClass]="{'has-danger': authorizedOverdraft.errors}">
|
||||
<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">
|
||||
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
||||
placeholder="Authorized overdraft">
|
||||
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
|
||||
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
|
||||
<p [hidden]="!authorizedOverdraft.errors.required">
|
||||
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
||||
<p *ngIf="authorizedOverdraft.errors.required">
|
||||
The authorized overdraft is required.
|
||||
</p>
|
||||
|
||||
<p [hidden]="!authorizedOverdraft.errors.max">
|
||||
<p *ngIf="authorizedOverdraft.errors.max">
|
||||
The authorized overdraft must be less than or equal to 0.
|
||||
</p>
|
||||
</div>
|
||||
@ -59,14 +54,34 @@ import { Account } from './account';
|
||||
</form>
|
||||
`
|
||||
})
|
||||
export class AccountFormComponent implements AfterViewChecked {
|
||||
export class AccountFormComponent implements OnInit {
|
||||
public form: FormGroup;
|
||||
@Input() account: Account;
|
||||
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@ViewChild('form') form: NgForm;
|
||||
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
constructor() {}
|
||||
constructor(private formBuilder: FormBuilder) {}
|
||||
|
||||
ngAfterViewChecked() {
|
||||
this.onValid.emit(this.form.form.valid);
|
||||
ngOnInit() {
|
||||
this.form = this.formBuilder.group({
|
||||
name: ['', Validators.required],
|
||||
authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
|
||||
});
|
||||
|
||||
this.form.patchValue({
|
||||
name: this.account.name,
|
||||
authorizedOverdraft: this.account.authorized_overdraft
|
||||
});
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.submitEventEmitter.emit();
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.form.get('name');
|
||||
}
|
||||
|
||||
get authorizedOverdraft() {
|
||||
return this.form.get('authorizedOverdraft');
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user