如何在反应形式中采用默认值

Posted 2023-03-05

【中文标题】如何在反应形式中采用默认值

【英文标题】：How to take default value in Reactive Form

【发布时间】：2021-07-12 20:44:10

【问题描述】：

我想使用响应式表单将 html 中的默认值传递给 Type 脚本

<ul class="list list_2">
<li>Subtotal <span>cartTotal | currency:'INR':true:'2.0'</span></li>
<li>Shipping Charge<span>shipping | currency:'INR':true:'2.0'</span></li>
<li>Total <span><input type="text" value="cartTotal+shipping | currency:'INR':true:'2.0'" class="total" formControlName="TotalAmount" readonly></span></li>
</ul>

这是我在输入中给出默认值的 HTML

get TotalAmount()
    return this.billingForm.get("TotalAmount.value")

在类型脚本中，我有这种获取数据的方法，我正在使用 Formgroup

billingForm=new FormGroup(
    Address:new FormControl('',[Validators.required]),
    City:new FormControl('',[Validators.required]),
    State:new FormControl('',[Validators.required]),
    Postcode:new FormControl('',[Validators.required]),
    TotalAmount:new FormControl(''),
    PayType:new FormControl('')
  )

我想传递该默认值，但它总是给出 null

【问题讨论】：

这return this.billingForm.get("TotalAmount.value")不应该是return this.billingForm.get("TotalAmount").value吗？

试过 this.billingForm.get("TotalAmount").value 仍然相同，给出空值

this.billingForm.controls.get("TotalAmount").value此表达式不可调用。 “AbstractControl”类型没有调用签名。

【参考方案1】：

你应该用不同的方式包装东西。

首先，更改表单的初始化。

将FormBuilder 添加为组件构造函数的依赖项。

constructor(private builder: FormBuilder) 

并使用构建器来初始化您的表单。

    this.billingForm = this.builder.group(
      Address: new FormControl("", [Validators.required]),
      City: new FormControl("", [Validators.required]),
      State: new FormControl("", [Validators.required]),
      Postcode: new FormControl("", [Validators.required]),
      TotalAmount: new FormControl(""),
      PayType: new FormControl("")
    );

那么，你的TotalAmount的HTML为：

<li>Total <span><input type="text" value="TotalAmount | currency:'INR':true:'2.0'" class="total" formControlName="TotalAmount" readonly></span></li>

所以，当您从数据库中获取 cartTotal 时。将cartTotal+shipping 分配给您的TotalAmount FormControl。喜欢：

this.billingForm.get("TotalAmount").setValue(this.cartTotal + this.shipping);

并且，将您的 TotalAmount 属性更改为：

   get TotalAmount() 
      return this.billingForm.get("TotalAmount").value;
   

示例：

工作演示StackBlitz

【参考方案2】：

我不确定您是否可以将表单控件与 value 属性一起使用。它可能会也可能不会起作用。无论如何，我认为这不是使用 angular Form Control 的正确方法。

在初始化表单控件时应该设置输入元素的默认值。在您的情况下，它是TotalAmount:new FormControl('2.0')。 2.0 是您要设置的默认值。

如果您想将管道应用于表单值，我建议您在 component.ts 文件中进行。角管道也可以用在ts文件中。

【参考方案3】：

应该是这样的。您必须访问表单控件才能返回值。

return this.billingForm.controls['TotalAmount'].value;

【讨论】：

试过这个还是给我空白

但是为什么要将总金额作为 html 的输入呢？只有一个变量不是更容易吗？你可以有 cartTotal+shipping | currency:'INR':true:'2.0' 然后在提交表单之前您可以设置 TotalAmount 变量

我想将该值传递给我的数据库，所以首先我必须获取该数据

我从数据库中取出 cartTotal 并且运费将是静态值