From 0600c1b653112edb7603f119f15d6e65e1bd12f8 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 11 Aug 2017 23:15:07 +0200 Subject: [PATCH] Switch to reactive forms in schedule module. --- src/scheduler/schedule.module.ts | 4 +- src/scheduler/scheduleEditModal.component.ts | 23 ++- src/scheduler/scheduleForm.component.ts | 180 +++++++++++++++---- 3 files changed, 163 insertions(+), 44 deletions(-) diff --git a/src/scheduler/schedule.module.ts b/src/scheduler/schedule.module.ts index d66145b..a6b980f 100644 --- a/src/scheduler/schedule.module.ts +++ b/src/scheduler/schedule.module.ts @@ -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'; @@ -23,7 +23,7 @@ import { ScheduleListState } from './schedule.states'; imports: [ HttpClientModule, CommonModule, - FormsModule, + ReactiveFormsModule, RouterModule.forChild([ ScheduleListState ]), diff --git a/src/scheduler/scheduleEditModal.component.ts b/src/scheduler/scheduleEditModal.component.ts index 98258f8..02ef752 100644 --- a/src/scheduler/scheduleEditModal.component.ts +++ b/src/scheduler/scheduleEditModal.component.ts @@ -1,10 +1,10 @@ // vim: set tw=80 ts=2 sw=2 sts=2: -import { Component, Input } from '@angular/core'; -import { NgForm } from '@angular/forms'; +import { Component, Input, ViewChild } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { Schedule } from './schedule'; +import { ScheduleFormComponent } from './scheduleForm.component'; @Component({ selector: 'schedule-edit-modal', @@ -14,11 +14,11 @@ import { Schedule } from './schedule';
- +
- @@ -30,6 +30,7 @@ import { Schedule } from './schedule'; }) export class ScheduleEditModalComponent { @Input() schedule: Schedule; + @ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent; valid: boolean = false; @@ -44,7 +45,19 @@ export class ScheduleEditModalComponent { } 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 { diff --git a/src/scheduler/scheduleForm.component.ts b/src/scheduler/scheduleForm.component.ts index a2155f1..3169536 100644 --- a/src/scheduler/scheduleForm.component.ts +++ b/src/scheduler/scheduleForm.component.ts @@ -1,83 +1,189 @@ // 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, Input, Output, EventEmitter } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Schedule } from './schedule'; @Component({ selector: 'schedule-form', + exportAs: 'scheduleForm', template: ` -
-
+ +
-
- + + +
+

The start date is required.

+
-
+
-
- + + +
+

The stop date is required.

+
-
+
-
- + +
+ + +
+

The day is required.

+

The day must be greater than 0.

+

The day must be less than or equal to 31.

+
-
+
-
- + +
+ + +
+

The frequency is required.

+

The frequency must be positive.

+
-
+
-
- + +
+ + +
+

The label is required.

+
-
+
-
- + +
+ + +
+

The value is required.

+
-
+
-
- + +
+ + +
+

The category is required.

+
` }) -export class ScheduleFormComponent implements AfterViewChecked { +export class ScheduleFormComponent implements OnInit { + public form: FormGroup; @Input() schedule: Schedule; - @Output() onValid: EventEmitter = new EventEmitter(); - @ViewChild('form') form: NgForm; + @Output('submit') submitEventEmitter: EventEmitter = new EventEmitter(); + //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({ + 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'); } }