Question

我有以下组件：

@ViewChild('myForm') myForm: NgForm

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

并在我的模板中：

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

唯一担心的是默认情况下myForm.valid是true，即使我有一些required字段未设置。因此，我doSomethingWithTheFormData()失败，因为其中一些人失踪了。这就好像表单的初始化没有完全完成（尽管在ngAfterViewInit()中）。

我设法通过在我的条件中添加this.myForm.dirty来解决此问题，但我觉得这不是正确的方法。

Answer 1

为什么不使用@ 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注入组件。

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

1 个答案: