Question

使用模型驱动表单我如何为嵌套的formGroup设置setValue？没有嵌套的formGroup，我可以这样做：

export class MyComponent {

  constructor(
    private formBuilder: FormBuilder) {
      this.form = formBuilder.group({
        id: [],
        title: ['', Validators.required],
        start_date: ['', Validators.required],
        end_date: ['', Validators.required]
     });
  }

  ngOnInit() {
    ...
    this.form.setValue({
      id: this.academicTerm.id,
      title: this.academicTerm.title,
      start_date: this.academicTerm.start_date,
      end_date: this.academicTerm.end_date
    });
    ...
  }

}

这很好但是如果我将开始和结束日期嵌入到他们自己的dates formGroup中（用于验证...未显示），那么我找不到设置开始和结束日期值的方法。

export class MyComponent {

  constructor(
    private formBuilder: FormBuilder) {
      this.form = formBuilder.group({
        id: [],
        title: ['', Validators.required],
        dates: formBuilder.group({
          start_date: ['', Validators.required],
          end_date: ['', Validators.required]
        })
     });
  }

Answer 1

您可以按如下方式设置日期值：

this.form.controls['dates'].setValue({
    start_date: '',
    end_date: '',
});

或整个表格：

this.form.setValue({
  id: '',
  title: '',
  dates: {
      start_date: '',
      end_date: ''
  }
});

但是，如果您正在设置默认值，则只需在构建表单时执行此操作，而不是使用空值（''）。

多个formGroups的setValue

1 个答案: