禁用时表单控件值变为空 OnSubmit

Question

我有以下 Angular 7 表单：

ngOnInit() {

  this.organizationId = 1; // Used for testing

  this.form = this.formBuilder.group({     
    name: [''],
    organizationId: [{ value: this.organizationId, disabled: this.enableOrganizationChange }],
    start: ['']
  });

}

在 HTML 中，我将Select 用于OrganizationId。它按预期被禁用。

但是提交时的值是 null 而不是 1：

onSubmit() {

  if (this.form.valid) {

    this.submitting = true;

    console.log(this.form.value.organizationId);

    let request: Request = { 
      name: this.form.value.name,
      organizationId: this.form.value.organizationId.value,
      start: this.form.value.start
    };

  }

}

为什么记录的值是null 而不是1？

我使用 disabled 只是为了避免用户更改值。

但我仍然需要提交时的值...

Answer 1

正如您所注意到的，Angular 会忽略表单对象中禁用的表单控件。

这可以通过使用 getRawValue() 轻松解决，它包括所有表单控件，无论是否禁用。因此，例如在您提交时，您传递表单（不是表单值），如下所示：

(ngSubmit)="onSubmit(form)" 
Then you can use getRawValue:

onSubmit() {
  console.log(form.getRawValue())
}

请注意，所有这些都是使用 NgForms 而不是 ReactiveForms 发生的。 您可以通过添加 getRawValue() 来相应地更改 For ReactiveForms，例如：console.log(this.form.organizationId.getRawValue());