Angular4，初始化时表单设置为有效

我有以下组成部分：

@ViewChild('myForm') myForm: NgForm

ngAfterViewInit(): void {
    this.myForm.valueChanges
        .subscribe(() => {
          if(this.myForm.valid) {
            doSomethingWithTheFormData()
          }
        })
  }

在我的模板中：

<form #myForm="ngForm">
  ...
</form>

...

唯一担心的是默认情况下myForm.valid是

true

，即使我有一些

必填的
字段未设置。因此，它在my
DoSomethingWith the FormData（）
中失败，因为其中一些已丢失。
这就像表单的初始化没有完全完成一样（尽管处于
ngAfterViewInit（）
）

我设法解决了这个问题，在我的情况下添加了一个
this.myForm.dirty
，但我觉得这不是正确的方法
 为什么不使用@angular/forms模块中的FormGroup

this.eventForm = this.formBuilder.group({
  startTime: ['', Validators.required],
  endTime: ['', Validators.required],
});

然后在模板中

<form class="event-publisher__form" [formGroup]="eventForm" (ngSubmit)="onSubmit()" novalidate> 
   enter code here
</form>


在这里输入代码

我应该注意，这是使用ReactiveFormsModule。在功能模块中导入此模块，然后将FormBuilder注入组件。
为什么不使用@angular/forms模块中的FormGroup

this.eventForm = this.formBuilder.group({
  startTime: ['', Validators.required],
  endTime: ['', Validators.required],
});

然后在模板中

<form class="event-publisher__form" [formGroup]="eventForm" (ngSubmit)="onSubmit()" novalidate> 
   enter code here
</form>


在这里输入代码

我应该注意，这是使用ReactiveFormsModule。在功能模块中导入此模块，然后将FormBuilder注入组件。
好吧，只是因为我想使用模板驱动的表单，而不是模型驱动的表单。模板驱动的表单将表单控件的创建委托给指令。构建整个树需要一个以上的周期，因此在操作这些控件之前必须等待。使用ngAfterViewInit，在验证控件或设置值之前，必须使用setTimeout。好吧，只是因为我想使用模板驱动的表单而不是模型驱动的表单模板驱动的表单在此模板驱动的表单将表单控件的创建委托给指令。构建整个树需要一个以上的周期，因此在操作这些控件之前必须等待。使用ngAfterViewInit，在验证控件或设置值之前，必须使用setTimeout。