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

Question

我想使用响应式表单将 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

Answer 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

Answer 2

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

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

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

Answer 3

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

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