Reactive FormGroup 隐藏默认值

Question

我能否用值初始化 FormGroup，而不让值反映在模型中，以便输入字段在开始时显示为空白？

我有一个formGroup如下：

this.fg = this.fb.group({
  saleValue: 0,
  letValue: 0
});

像这样绑定到我的模型：

<form [formGroup]="fg">
  <input formControlName="saleValue" />
  <input formControlName="letValue" />
</form>

如果用户未输入 sale/let 值，则应将其作为 0 提交给服务器 - 因此使用 formGroup 进行初始化。

但是，我不希望这个 0 显示在输入字段中。因此，当我使用 getValue() 提交表单时，我的值已按要求设置。有没有办法做到这一点？

我担心我需要手动完成并将 FormGroup 控件初始化为 null，并检查两个控件的值和 setValue(0) 如果它们仍然是 null...

Answer 1

我认为你应该这样做

this.fg = this.fb.group({
  saleValue: '',
  letValue: ''
});

在表单标记中

<form [formGroup]="fg" (ngSubmit)="onSubmitFunction(fg)" >
  <input formControlName="saleValue" />
  <input formControlName="letValue" />
</form>

并在提交函数中..

onSubmitFunction (form) {
  if (!form.value.saleValue) form.value.saleValue = 0
  if (!form.value.letValue) form.value.letValue= 0

// and then submit the form 
}

Answer 2

依赖虚假值。

this.fg = this.fb.group({
  saleValue: 0,
  letValue: 0
});

submit() {
  ...
  const value = this.fg.value;
  this.setDefaultValues(value);
  ...
}

setDefaultValues(formValue) {
  formValue.saleValue = formValue.saleValue || 0;
  formValue.letValue = formValue.letValue || 0;
}

使用此解决方案，如果输入为假（undefined、null 或 ''），则该值将替换为零。

Reactive FormGroup 隐藏默认值

Reactive FormGroup hidden default values

forms

angular

angular-reactive-forms