The following is the structure of the component:
export class SchedulerComponent implements OnInit {
schedulerForm : FormGroup;
constructor(private fb: FormBuilder,
private schedulerReportService: SchedulerReportService) {
this.prefReport = "dayReport";
this.schedulerForm = this.fb.group({
schedulerCategory:['dayReport'],
dayReport: this.fb.group({
d_date: ['',Validators.required],
d_runTime: ['',Validators.required],
d_timeZone: ['',Validators.required],
}),
rangeReport: this.fb.group({
r_runTime: [''],
r_startDate: [''],
r_endDate: [''],
r_timeZone: ['']
}),
});
this.onValueChanges()
}
@Output() change: EventEmitter<MatRadioChange>;
@Output() scheduleEvent = new EventEmitter<ScheduleService>();
showScheduler = false
prefReport : string
dayReport = true;
rangeReport = false;
ngOnInit() {
this.setScheduleFormValidators();
}
onValueChanges(): void {
this.schedulerForm.valueChanges.subscribe(val=>{
console.log(this.schedulerForm.status)
if(this.schedulerForm.status === 'VALID'){
let scheduleServiceModel = new ScheduleService(val)
this.scheduleEvent.emit(scheduleServiceModel)
}
})
}
toggled(){
this.showScheduler = !this.showScheduler;
}
radioSelect(event : MatRadioChange){
let radioSelect=event.value;
this.schedulerForm.reset();
if (radioSelect == 'dayReport'){
this.dayReport = true;
this.rangeReport = false;
this.schedulerForm.get('schedulerCategory').setValue('dayReport');
}else if(radioSelect == 'rangeReport'){
this.dayReport = false;
this.rangeReport = true;
this.schedulerForm.get('schedulerCategory').setValue('rangeReport');
}
};
setScheduleFormValidators() : void {
const drunTime = this.schedulerForm.get(['dayReport','d_runTime']);
const ddate = this.schedulerForm.get(['dayReport','d_date']);
const dtimeZone = this.schedulerForm.get(['dayReport','d_timeZone']);
const rrunTime = this.schedulerForm.get(['rangeReport','r_runTime']);
const rtimeZone = this.schedulerForm.get(['rangeReport','r_timeZone']);
const rstartDate = this.schedulerForm.get(['rangeReport','r_startDate']);
const rendDate = this.schedulerForm.get(['rangeReport','r_endDate']);
this.schedulerForm.get('schedulerCategory').valueChanges
.subscribe(schedulerCategory => {
if (schedulerCategory === 'dayReport') {
drunTime.setValidators([Validators.required]);
ddate.setValidators([Validators.required]);
dtimeZone.setValidators([Validators.required]);
rrunTime.setValidators(null);
rtimeZone.setValidators(null);
rstartDate.setValidators(null);
rendDate.setValidators(null);
}
else if (schedulerCategory === 'rangeReport') {
drunTime.setValidators(null);
ddate.setValidators(null);
dtimeZone.setValidators(null);
rrunTime.setValidators([Validators.required]);
rtimeZone.setValidators([Validators.required]);
rstartDate.setValidators([Validators.required]);
rendDate.setValidators([Validators.required]);
}
drunTime.updateValueAndValidity();
ddate.updateValueAndValidity();
dtimeZone.updateValueAndValidity();
rrunTime.updateValueAndValidity();
rtimeZone.updateValueAndValidity();
rstartDate.updateValueAndValidity();
rendDate.updateValueAndValidity();
});
}
}
When the radioSelect() function is executed, a form group is displayed to the user. Upon running the application and filling out the default form, everything works as expected. However, if I switch the radioSelect(), an issue occurs in the console where the status becomes invalid until schedulerCategory is updated (even though it's just one field):
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 INVALID
scheduler.component.ts:64 VALID
While monitoring the value changes on the form, after switching without completing any fields, the form.status appears valid in the form.valueChanges subscriber. There seems to be something missing here that I can't quite identify. Any insights would be greatly appreciated!