Why is Angular8 form.status VALID when input fields are blank?

Question

The component is as follows :

  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 fired, a form group is shown to the user. Now, when I run the app and complete the pre-selected form everything is fine. However if I toggle the radioSelect() I get this behavior/ error in the console, the status is invalid, until scheduleCategory is updated ( but that is only one of the fields) :

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

Im listening to the value changes on the form and after toggling to it, without completing any field, the form.valueChanges subscriber shows us the form.status is valid, I am missing something here and I cant pinpoint it. Would really appreciate the insight !

why not "disabled" the FormControls? a FormControl disabled is always valid — Eliseo, May 12 '20 at 09:10
check this: https://stackoverflow.com/questions/59702096/toggle-multiple-fields-on-off-in-formbuilder-clean-syntax-in-angular/59704083#59704083 — Eliseo, May 12 '20 at 15:01

Derek Kite · Accepted Answer · 2020-05-12T04:53:53.777

1

Usually I filter the valueChanges with .valid and .dirty

myForm.valueChanges.pipe(
   filter(() => myForm.valid && myForm.dirty)
   )
.subscribe(values => ...

edited May 12 '20 at 04:53

answered May 12 '20 at 04:46

Derek Kite

1,767
13
15

Is there an advantage to using pipe over subscribe in this case? – ManBearPig May 12 '20 at 04:49
Thanks mate, elegant answer, will make sure to read into the dirty and pristine :) – ManBearPig May 12 '20 at 04:55

Why is Angular8 form.status VALID when input fields are blank?

1 Answers1