Reactive FormGroup 隐藏默认值答案

【问题标题】：Reactive FormGroup hidden default valuesReactive FormGroup 隐藏默认值
【发布时间】：2018-07-27 21:12:15
【问题描述】：

我可以用值初始化 FormGroup，但不让值反映在模型中，这样输入字段在开始时显示为空白吗？

我有一个formGroup，如下：

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

像这样绑定到我的模型：

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

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

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

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

【问题讨论】：

标签： angular forms angular-reactive-forms

【解决方案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 
}

【讨论】：

【解决方案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;
}

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

【讨论】：