Migrate to reactive forms in operation module.

This commit is contained in:
Alexis Lahouze 2017-08-13 12:28:10 +02:00
parent 0600c1b653
commit 13670f0317
3 changed files with 104 additions and 33 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';
@ -26,7 +26,7 @@ import { OperationListState } from './operation.states'
imports: [ imports: [
HttpClientModule, HttpClientModule,
CommonModule, CommonModule,
FormsModule, ReactiveFormsModule,
RouterModule.forChild([ RouterModule.forChild([
OperationListState OperationListState
]), ]),

View File

@ -1,9 +1,10 @@
// 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 { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Operation } from './operation'; import { Operation } from './operation';
import { OperationFormComponent } from './operationForm.component';
@Component({ @Component({
selector: 'operation-edit-modal', selector: 'operation-edit-modal',
@ -13,11 +14,11 @@ import { Operation } from './operation';
</div> </div>
<div class="modal-body" id="modal-body"> <div class="modal-body" id="modal-body">
<operation-form [(operation)]="operation" (onValid)="valid=$event"></operation-form> <operation-form [operation]="operation" (submit)="submit()" #operationForm="operationForm"></operation-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]="!operationForm.form.valid" (click)="submit()">
Save Save
</button> </button>
@ -29,6 +30,7 @@ import { Operation } from './operation';
}) })
export class OperationEditModalComponent { export class OperationEditModalComponent {
@Input() operation: Operation; @Input() operation: Operation;
@ViewChild('operationForm') operationForm: OperationFormComponent;
valid: boolean = false; valid: boolean = false;
@ -43,7 +45,16 @@ export class OperationEditModalComponent {
} }
submit(): void { submit(): void {
this.activeModal.close(this.operation); let formModel = this.operationForm.form.value;
let operation = Object.assign({}, this.operation);
operation.id = this.operation.id;
operation.operation_date = formModel.operationDate;
operation.label = formModel.label;
operation.value = formModel.value;
operation.category = formModel.category;
this.activeModal.close(operation);
} }
cancel(): void { cancel(): void {

View File

@ -1,62 +1,122 @@
// 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 { Operation } from './operation'; import { Operation } from './operation';
@Component({ @Component({
selector: 'operation-form', selector: 'operation-form',
exportAs: 'operationForm',
template: ` template: `
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm"> <form novalidate (keyup.enter)="submit()" [formGroup]="form">
<div class="form-group"> <div class="form-group row">
<label class="col-sm-4 control-label" for="operation-date">Date</label> <label class="col-sm-4 control-label" for="operation-date">Date</label>
<div class="col-sm-8">
<input class="form-control" id="operation-date" name="operation_date" <div class="col-sm-8"
type="text" [(ngModel)]="operation.operation_date" [class.has-danger]="operationDate.errors">
<input class="form-control"
id="operation-date" formControlName="operationDate"
[textMask]="{mask: dateMask}" [textMask]="{mask: dateMask}"
placeholder="Operation date"> placeholder="Operation date">
<div class="help-block text-danger" *ngIf="operationDate.errors">
<p *ngIf="operationDate.errors.required">The operation date is required.</p>
</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label class="col-sm-4 control-label" for="label">Label</label> <label class="col-sm-4 control-label" for="label">Label</label>
<div class="col-sm-8">
<input class="form-control" id="label" name="label" <div class="col-sm-8"
[(ngModel)]="operation.label" type="text" placeholder="Label"> [class.has-danger]="label.errors">
<input class="form-control"
id="label" formControlName="label"
placeholder="Label">
<div class="help-block text-danger" *ngIf="label.errors">
<p *ngIf="label.errors.required">The operation label is required.</p>
</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label class="col-sm-4 control-label" for="value">Montant</label> <label class="col-sm-4 control-label" for="value">Montant</label>
<div class="col-sm-8">
<input class="form-control" id="value" name="value" <div class="col-sm-8"
[(ngModel)]="operation.value" type="number" placeholder="Value"> [class.has-errors]="value.errors">
<input class="form-control"
id="value" formControlName="value"
type="number" placeholder="Value">
<div class="help-block text-danger" *ngIf="value.errors">
<p *ngIf="value.errors.required">The operation value is required.</p>
</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label class="col-sm-4 control-label" for="category">Catégorie</label> <label class="col-sm-4 control-label" for="category">Catégorie</label>
<div class="col-sm-8">
<input class="form-control" id="category" name="category" <div class="col-sm-8"
[(ngModel)]="operation.category" type="text" placeholder="Category"> [class.has-errors]="category.errors">
<input class="form-control"
id="category" formControlName="category"
placeholder="Category">
<div class="help-block text-danger" *ngIf="category.errors">
<p *ngIf="category.errors.required">The operation category is required.</p>
</div>
</div> </div>
</div> </div>
</form> </form>
` `
}) })
export class OperationFormComponent implements AfterViewChecked { export class OperationFormComponent implements OnInit {
public form: FormGroup;
@Input() operation: Operation; @Input() operation: Operation;
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
@ViewChild('form') form: NgForm;
//dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/]; //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/]; dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
constructor() {} constructor(private formBuilder: FormBuilder) {}
ngAfterViewChecked() { ngOnInit() {
this.onValid.emit(this.form.form.valid); this.form = this.formBuilder.group({
operationDate: ['', Validators.required],
label: ['', Validators.required],
value: ['', Validators.required],
category: ['', Validators.required],
});
this.form.patchValue({
operationDate: this.operation.operation_date,
label: this.operation.label,
value: this.operation.value,
category: this.operation.category,
});
}
submit() {
if(this.form.valid) {
this.submitEventEmitter.emit();
}
}
get operationDate() {
return this.form.get('operationDate');
}
get label() {
return this.form.get('label');
}
get value() {
return this.form.get('value');
}
get category() {
return this.form.get('category');
} }
} }