如何在 Reactive Form 中获取默认值

Question

我想使用响应式表单将默认值从 HTML 传递给类型脚本

<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

Answer 1

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

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

Answer 2

我不确定您是否可以将 Form 控件与 value 属性一起使用。它可能有效也可能无效。我不认为这是使用 angular Form Control 的正确方法。

在初始化表单控件时应设置输入元素的默认值。在你的例子中是 TotalAmount:new FormControl('2.0')。 2.0 是您要设置的默认值。

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

Answer 3

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

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

将 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

如何在 Reactive Form 中获取默认值

How to take default value in Reactive Form

html

default-value

angular

angular-reactive-forms

angular8