Switch to reactive forms in schedule module.
This commit is contained in:
parent
1f896e1a40
commit
0600c1b653
@ -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';
|
||||||
|
|
||||||
@ -23,7 +23,7 @@ import { ScheduleListState } from './schedule.states';
|
|||||||
imports: [
|
imports: [
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
CommonModule,
|
CommonModule,
|
||||||
FormsModule,
|
ReactiveFormsModule,
|
||||||
RouterModule.forChild([
|
RouterModule.forChild([
|
||||||
ScheduleListState
|
ScheduleListState
|
||||||
]),
|
]),
|
||||||
|
@ -1,10 +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 { NgForm } from '@angular/forms';
|
|
||||||
|
|
||||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
|
||||||
import { Schedule } from './schedule';
|
import { Schedule } from './schedule';
|
||||||
|
import { ScheduleFormComponent } from './scheduleForm.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'schedule-edit-modal',
|
selector: 'schedule-edit-modal',
|
||||||
@ -14,11 +14,11 @@ import { Schedule } from './schedule';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body" id="modal-body">
|
<div class="modal-body" id="modal-body">
|
||||||
<schedule-form [(schedule)]="schedule" (onValid)="valid=$event"></schedule-form>
|
<schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-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]="!scheduleForm.form.valid" (click)="submit()">
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -30,6 +30,7 @@ import { Schedule } from './schedule';
|
|||||||
})
|
})
|
||||||
export class ScheduleEditModalComponent {
|
export class ScheduleEditModalComponent {
|
||||||
@Input() schedule: Schedule;
|
@Input() schedule: Schedule;
|
||||||
|
@ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent;
|
||||||
|
|
||||||
valid: boolean = false;
|
valid: boolean = false;
|
||||||
|
|
||||||
@ -44,7 +45,19 @@ export class ScheduleEditModalComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
submit(): void {
|
submit(): void {
|
||||||
this.activeModal.close(this.schedule);
|
let formModel = this.scheduleForm.form.value;
|
||||||
|
let schedule = new Schedule();
|
||||||
|
|
||||||
|
schedule.id = this.schedule.id;
|
||||||
|
schedule.start_date = formModel.startDate;
|
||||||
|
schedule.stop_date = formModel.stopDate;
|
||||||
|
schedule.day = formModel.day;
|
||||||
|
schedule.frequency = formModel.frequency;
|
||||||
|
schedule.label = formModel.label;
|
||||||
|
schedule.value = formModel.value;
|
||||||
|
schedule.category = formModel.category;
|
||||||
|
|
||||||
|
this.activeModal.close(schedule);
|
||||||
}
|
}
|
||||||
|
|
||||||
cancel(): void {
|
cancel(): void {
|
||||||
|
@ -1,83 +1,189 @@
|
|||||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||||
import { AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||||
import { NgForm } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
|
||||||
import { Schedule } from './schedule';
|
import { Schedule } from './schedule';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'schedule-form',
|
selector: 'schedule-form',
|
||||||
|
exportAs: 'scheduleForm',
|
||||||
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="start-date">Date de début (AAAA-MM-JJ)</label>
|
<label class="col-sm-4 control-label" for="start-date">Date de début (AAAA-MM-JJ)</label>
|
||||||
<div class="col-sm-8">
|
|
||||||
<input class="form-control" id="start-date" name="start_date"
|
<div class="col-sm-8"
|
||||||
[(ngModel)]="schedule.start_date" [textMask]="{mask: dateMask}"
|
[class.has-danger]="startDate.errors">
|
||||||
|
<input class="form-control"
|
||||||
|
id="start-date" formControlName="startDate"
|
||||||
|
[textMask]="{mask: dateMask}"
|
||||||
placeholder="Schedule start date">
|
placeholder="Schedule start date">
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="startDate.errors">
|
||||||
|
<p *ngIf="startDate.errors.required">The start 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="stop-date">Date de fin (AAAA-MM-JJ)</label>
|
<label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>
|
||||||
<div class="col-sm-8">
|
|
||||||
<input class="form-control" id="stop-date" name="stop_date"
|
<div class="col-sm-8"
|
||||||
[(ngModel)]="schedule.stop_date" [textMask]="{mask: dateMask}"
|
[class.has-danger]="stopDate.errors">
|
||||||
|
<input class="form-control"
|
||||||
|
id="stop-date" formControlName="stopDate"
|
||||||
|
[textMask]="{mask: dateMask}"
|
||||||
placeholder="Schedule stop date">
|
placeholder="Schedule stop date">
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="stopDate.errors">
|
||||||
|
<p *ngIf="stopDate.errors.required">The stop 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="day">Jour</label>
|
<label class="col-sm-4 control-label" for="day">Jour</label>
|
||||||
<div class="col-sm-8">
|
|
||||||
<input class="form-control" id="day" name="day"
|
<div class="col-sm-8"
|
||||||
[(ngModel)]="schedule.day" type="number" placeholder="Day">
|
[class.has-danger]="day.errors">
|
||||||
|
<input class="form-control"
|
||||||
|
id="day" formControlName="day"
|
||||||
|
type="number" placeholder="Day">
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="day.errors">
|
||||||
|
<p *ngIf="day.errors.required">The day is required.</p>
|
||||||
|
<p *ngIf="day.errors.min">The day must be greater than 0.</p>
|
||||||
|
<p *ngIf="day.errors.max">The day must be less than or equal to 31.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group row">
|
||||||
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
||||||
<div class="col-sm-8">
|
|
||||||
<input class="form-control" id="frequency" name="frequency"
|
<div class="col-sm-8"
|
||||||
[(ngModel)]="schedule.frequency" type="number" placeholder="Frequency">
|
[class.has-danger]="frequency.errors">
|
||||||
|
<input class="form-control"
|
||||||
|
id="frequency" formControlName="frequency"
|
||||||
|
type="number" placeholder="Frequency">
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="frequency.errors">
|
||||||
|
<p *ngIf="frequency.errors.required">The frequency is required.</p>
|
||||||
|
<p *ngIf="frequency.errors.min">The frequency must be positive.</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)]="schedule.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 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)]="schedule.value" type="number" placeholder="Value">
|
[class.has-danger]="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 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)]="schedule.category" type="text" placeholder="Category">
|
[class.has-danger]="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 category is required.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class ScheduleFormComponent implements AfterViewChecked {
|
export class ScheduleFormComponent implements OnInit {
|
||||||
|
public form: FormGroup;
|
||||||
@Input() schedule: Schedule;
|
@Input() schedule: Schedule;
|
||||||
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
|
@Output('submit') 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 = ['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({
|
||||||
|
startDate: ['', Validators.required],
|
||||||
|
stopDate: ['', Validators.required],
|
||||||
|
day: ['', [Validators.required, Validators.min(1), Validators.max(31)]],
|
||||||
|
frequency: ['', [Validators.required, Validators.min(0)]],
|
||||||
|
label: ['', Validators.required],
|
||||||
|
value: ['', Validators.required],
|
||||||
|
category: ['', Validators.required],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.form.patchValue({
|
||||||
|
startDate: this.schedule.start_date,
|
||||||
|
stopDate: this.schedule.stop_date,
|
||||||
|
day: this.schedule.day,
|
||||||
|
frequency: this.schedule.frequency,
|
||||||
|
label: this.schedule.label,
|
||||||
|
value: this.schedule.value,
|
||||||
|
category: this.schedule.category,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
if(this.form.valid) {
|
||||||
|
this.submitEventEmitter.emit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get startDate() {
|
||||||
|
return this.form.get('startDate');
|
||||||
|
}
|
||||||
|
|
||||||
|
get stopDate() {
|
||||||
|
return this.form.get('stopDate');
|
||||||
|
}
|
||||||
|
|
||||||
|
get day() {
|
||||||
|
return this.form.get('day');
|
||||||
|
}
|
||||||
|
|
||||||
|
get frequency() {
|
||||||
|
return this.form.get('frequency');
|
||||||
|
}
|
||||||
|
|
||||||
|
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