代码之家 › 专栏 › 技术社区 › keldar

反应式窗体组隐藏默认值

angular-reactive-forms forms angular

0

keldar · 技术社区 · 7 年前

我可以用值初始化一个窗体组,而不让值反映在模型中,这样输入字段在开始时显示为空吗?

我有一个 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) 如果他们还在 无效的 …

2 回复 | 直到 7 年前

1

Tawfiek Khalaf 7 年前

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

1

Maryannah 7 年前

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 ''