Migrate to reactive forms in operation module.
This commit is contained in:
parent
0600c1b653
commit
13670f0317
@ -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';
|
||||
|
||||
@ -26,7 +26,7 @@ import { OperationListState } from './operation.states'
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule.forChild([
|
||||
OperationListState
|
||||
]),
|
||||
|
@ -1,9 +1,10 @@
|
||||
// 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 { Operation } from './operation';
|
||||
import { OperationFormComponent } from './operationForm.component';
|
||||
|
||||
@Component({
|
||||
selector: 'operation-edit-modal',
|
||||
@ -13,11 +14,11 @@ import { Operation } from './operation';
|
||||
</div>
|
||||
|
||||
<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 class="modal-footer">
|
||||
<button class="btn btn-primary" [disabled]="!valid" (click)="submit()">
|
||||
<button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
|
||||
Save
|
||||
</button>
|
||||
|
||||
@ -29,6 +30,7 @@ import { Operation } from './operation';
|
||||
})
|
||||
export class OperationEditModalComponent {
|
||||
@Input() operation: Operation;
|
||||
@ViewChild('operationForm') operationForm: OperationFormComponent;
|
||||
|
||||
valid: boolean = false;
|
||||
|
||||
@ -43,7 +45,16 @@ export class OperationEditModalComponent {
|
||||
}
|
||||
|
||||
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 {
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user