alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Migrate to reactive forms in operation module.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

114
src/operations/operationForm.component.ts
View File

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