为什么输入字段为空时 Angular8 form.status VALID？

Question

组件如下：

  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();

    });

  }

}

触发 radioSelect() 函数时，将向用户显示一个表单组。现在，当我运行应用程序并完成预选表格时，一切都很好。但是，如果我切换 radioSelect() 我会在控制台中收到此行为/错误，状态无效，直到 scheduleCategory 更新（但这只是其中一个字段）：

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

我正在监听表单上的值变化，在切换到它之后，没有完成任何字段，form.valueChanges 订阅者向我们显示 form.status 是有效的，我在这里遗漏了一些东西，我无法确定它。非常感谢您的见解！

Answer 1

通常我用 .valid 和 .dirty 过滤 valueChanges

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

为什么输入字段为空时 Angular8 form.status VALID？

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

validation

typescript

angular

angular-reactive-forms

angular8