Improve Account form and edit modal.

This commit is contained in:
Alexis Lahouze 2017-08-04 14:52:37 +02:00
parent 58f1abce21
commit e68db9f54a
3 changed files with 63 additions and 41 deletions

View File

@ -2,7 +2,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
@ -24,7 +24,7 @@ import { AccountListState } from './account.states'
imports: [ imports: [
HttpClientModule, HttpClientModule,
CommonModule, CommonModule,
FormsModule, ReactiveFormsModule,
RouterModule.forChild([ RouterModule.forChild([
AccountListState AccountListState
]), ]),

View File

@ -1,10 +1,11 @@
// 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, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Account } from './account'; import { Account } from './account';
import { AccountFormComponent } from './accountForm.component';
@Component({ @Component({
selector: 'account-edit-modal', selector: 'account-edit-modal',
@ -14,11 +15,11 @@ import { Account } from './account';
</div> </div>
<div class="modal-body" id="modal-body"> <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>
<div class="modal-footer"> <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 Save
</button> </button>
@ -30,8 +31,7 @@ import { Account } from './account';
}) })
export class AccountEditModalComponent { export class AccountEditModalComponent {
@Input() account: Account; @Input() account: Account;
@ViewChild('accountForm') accountForm: AccountFormComponent;
valid: boolean = false;
constructor(private activeModal: NgbActiveModal) {} constructor(private activeModal: NgbActiveModal) {}
@ -44,7 +44,14 @@ export class AccountEditModalComponent {
} }
submit(): void { 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 { cancel(): void {

View File

@ -1,56 +1,51 @@
// vim: set tw=80 ts=2 sw=2 sts=2 : // vim: set tw=80 ts=2 sw=2 sts=2 :
import { import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild import { FormBuilder, FormGroup, Validators } from '@angular/forms';
} from '@angular/core';
import { NgForm } from '@angular/forms';
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Account } from './account'; import { Account } from './account';
@Component({ @Component({
selector: 'account-form', selector: 'account-form',
exportAs: 'accountForm',
template: ` template: `
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm"> <form class="form-horizontal simple-form" novalidate
<div class="form-group" (ngSubmit)="submit()" [formGroup]="form">
[ngClass]="{ 'has-error': name.errors }"> <div class="form-group row">
<label class="col-sm-4 control-label" for="name">Account name</label> <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" <input class="form-control"
type="text" placeholder="Account name" id="name" formControlName="name"
id="name" name="name" placeholder="Account name">
[(ngModel)]="account.name" #name="ngModel"
required>
<div class="help-block" *ngIf="name.errors && name.touched"> <div class="help-block text-danger" *ngIf="name.errors">
<p [hidden]="!name.errors.required">The account name is required.</p> <p *ngIf="name.errors.required">The account name is required.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group" <div class="form-group row">
[ngClass]="{ 'has-error': authorizedOverdraft.errors }"> <label class="col-sm-5 control-label" for="authorized-overdraft">Authorized overdraft</label>
<label class="col-sm-4 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"> <div class="input-group">
<input class="form-control" <input class="form-control"
type="number" placeholder="Authorized overdraft" id="authorized-overdraft" formControlName="authorizedOverdraft"
id="authorized-overdraft" name="authorized_overdraft" placeholder="Authorized overdraft">
[(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
required max="0">
<div class="input-group-addon">.00</div> <div class="input-group-addon">.00</div>
</div> </div>
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched"> <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
<p [hidden]="!authorizedOverdraft.errors.required"> <p *ngIf="authorizedOverdraft.errors.required">
The authorized overdraft is required. The authorized overdraft is required.
</p> </p>
<p [hidden]="!authorizedOverdraft.errors.max"> <p *ngIf="authorizedOverdraft.errors.max">
The authorized overdraft must be less than or equal to 0. The authorized overdraft must be less than or equal to 0.
</p> </p>
</div> </div>
@ -59,14 +54,34 @@ import { Account } from './account';
</form> </form>
` `
}) })
export class AccountFormComponent implements AfterViewChecked { export class AccountFormComponent implements OnInit {
public form: FormGroup;
@Input() account: Account; @Input() account: Account;
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
@ViewChild('form') form: NgForm;
constructor() {} constructor(private formBuilder: FormBuilder) {}
ngAfterViewChecked() { ngOnInit() {
this.onValid.emit(this.form.form.valid); 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');
} }
} }